Display Property

1. Block Elements (တစ်ကြောင်းလုံး ယူသူများ)

သူတို့က မျက်နှာပြင်ရဲ့ အလျားတစ်ကြောင်းလုံးကို အပြည့် နေရာယူပါတယ်။ သူ့ရဲ့ ဘေးမှာ တခြား ဘယ် Element ကိုမှ လာနေခွင့် မပေးပါဘူး။ ဥပမာ: <div>, <h1>, <p>, <ul>

.block-item {
  display: block; /* Default for div, p, etc. */
}

2. Inline Elements (စာသားလောက်သာ နေရာယူသူများ)

သူတို့ကတော့ သူတို့ရဲ့ အတွင်းမှာရှိတဲ့ စာသား (Content) ရှိသလောက် နေရာကိုပဲ ယူပါတယ်။ ဒါကြောင့် သူတို့ကို ဘေးချင်းယှဉ်ပြီး ထားလို့ ရပါတယ်။ ဒါပေမဲ့ မှတ်ထားရမှာက သူတို့ကို Width နဲ့ Height သွားပြီး သတ်မှတ်ပေးလို့ မရပါဘူး။ ဥပမာ: <span>, <a>, <b>

.inline-item {
  display: inline; /* Default for span, a, etc. */
}

3. Inline-Block (နှစ်မျိုးစပ်)

သူကတော့ Inline လိုမျိုး ဘေးချင်းယှဉ်နေလို့လည်း ရသလို၊ Block လိုမျိုး Width နဲ့ Height တွေကိုလည်း သတ်မှတ်ပေးလို့ ရပါတယ်။ နှစ်မျိုးစပ်ထားတဲ့ သဘောပါ။ Button တွေ ဖန်တီးတဲ့အခါမှာ အများဆုံး အသုံးပြုကြပါတယ်။

.button {
  display: inline-block;
  width: 100px;
  height: 40px;
}

4. None (ဖျောက်ထားခြင်း)

Element တစ်ခုကို မျက်နှာပြင်ပေါ်ကနေ လုံးဝ ဖျောက်ထားချင်ရင် (မမြင်ရအောင် လုပ်ချင်ရင်) သုံးပါတယ်။ ဒီလို ဖျောက်လိုက်ရင် သူယူထားတဲ့ နေရာပါ ပျောက်သွားမှာ ဖြစ်ပါတယ်။

.hidden {
  display: none; /* လုံးဝ မရှိတော့သလို ဖြစ်သွားမယ် */
}