Thuta Learning
ရှာဖွေရန်
IntermediateWeb Developmentbeginner

Display Property

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

  • Element layout behavior ကိုပြောင်းတတ်ရန်

display property က element တစ်ခု page ပေါ်မှာ ဘယ်လိုနေမလဲဆိုတာကိုသတ်မှတ်ပါတယ်။ block က line တစ်ကြောင်းလုံးယူတတ်တယ်။ inline က content လိုသလောက်ပဲယူတယ်။ inline-block က inline လိုဘေးတိုက်နေပြီး width/height သတ်မှတ်လို့ရတယ်။ flex နဲ့ grid က modern layout တွေရဲ့ main weapon တွေပါ။

css
.nav-link {
  display: inline-block;
  padding: 10px 14px;
}

.card-list {
  display: flex;
  gap: 16px;
}
You should see
Navigation link တွေက padding သတ်မှတ်လို့ရလာမယ်။ Card list က flex layout ဖြစ်ပြီး card တွေကြား gap ရှိလာပါမယ်။

Tip

display: none; က element ကို screen reader အပါအဝင် layout ထဲကနေဖျောက်ပေးပါတယ်။ Visibility ပဲဖျောက်ချင်ရင် visibility ကိုလည်းစဉ်းစားပါ။

Display Property | Thuta Learning