The Box Model

Box Model ဆိုတာ ဘာလဲ?

Element တစ်ခုစီတိုင်းမှာ အလွှာ (၄) ခု ပါဝင်ပါတယ်။ အဲဒီအလွှာတွေကို အတွင်းဆုံးကနေ အပြင်ဘက်ကို အစဉ်လိုက် ကြည့်မယ်ဆိုရင် -

Content: မိမိပြချင်တဲ့ စာသား သို့မဟုတ် ပုံတွေ ရှိနေမယ့် နေရာ (အနှစ်)။
Padding: အဲဒီ Content လေးနဲ့ ဘေးက Border ကြားမှာရှိတဲ့ အကွာအဝေး (အသား)။
Border: ဘေးပတ်လည်ကနေ ကာရံထားတဲ့ ဘောင် (အခွံ)။
Margin: တခြား Box တွေနဲ့ မိမိရဲ့ Box ကြားမှာ ထားချင်တဲ့ အကွာအဝေး (အပြင်စည်း)။

ဥပမာ မြင်ကွင်း

.box {
  width: 200px;      /* Content အကျယ် */
  padding: 20px;     /* Content ဘေးက အသား */
  border: 5px solid black; /* ဘောင် */
  margin: 30px;      /* ဘေးက Box တွေနဲ့ ကွာမယ့် အကွာအဝေး */
}

Box Sizing (အရေးကြီး!)

ပုံမှန်အားဖြင့် width လို့ သတ်မှတ်လိုက်ရင် အဲဒါဟာ Content ရဲ့ အကျယ်ကိုပဲ ဆိုလိုတာပါ။ အဲဒီမှာမှ Padding တွေ Border တွေ ထပ်ပေါင်းထည့်လိုက်တဲ့အခါ Box ကြီးက မူလထက် ပိုကြီးသွားတတ်ပါတယ်။ ဒီပြဿနာကို ဖြေရှင်းဖို့အတွက် box-sizing: border-box; ကို သုံးပေးဖို့ အကြံပြုချင်ပါတယ်။

* {
  box-sizing: border-box; /* Padding နဲ့ Border ကို width ထဲမှာပဲ ထည့်တွက်မယ် */
}

Margin Collapse (Margin ပေါင်းသွားခြင်း)

အပေါ်အောက် ကပ်နေတဲ့ Block Element နှစ်ခုရှိတယ် ဆိုပါစို့။ အပေါ်က Element ရဲ့ Bottom Margin နဲ့ အောက်က Element ရဲ့ Top Margin လာဆုံတဲ့အခါ၊ Margin နှစ်ခု ပေါင်းမသွားဘဲ အများဆုံး တန်ဖိုးတစ်ခုတည်း ကိုသာ အတည်ယူသွားတာကို Margin Collapse လို့ ခေါ်ပါတယ်။

h1 { margin-bottom: 20px; }
p { margin-top: 30px; }

/* ကြားထဲမှာ 50px မကွာဘဲ၊ 30px (အများဆုံးတန်ဖိုး) ပဲ ကွာပါလိမ့်မယ် */