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 နှစ်ခုမှာ၊ တစ်ခုရဲ့ Bottom Margin နဲ့ နောက်တစ်ခုရဲ့ Top Margin တွေ့ရင်၊ ပေါင်းမသွားဘဲ အများဆုံးတန်ဖိုး တစ်ခုတည်း ကိုပဲ ယူပါတယ်။

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

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