Box Model Intro

CSS မှာ element တိုင်းကို box တစ်ခုအနေနဲ့စဉ်းစားပါတယ်။ Box Model ထဲမှာ Content, Padding, Border, Margin ဆိုပြီး အပိုင်း ၄ ပိုင်းရှိပါတယ်။ Layout ပြဿနာတွေ အများစုက ဒီ ၄ ခုကိုမခွဲနိုင်လို့ဖြစ်တာပါ။ Content က အတွင်းစာ/ပုံရှိရာနေရာ၊ padding က content နဲ့ border ကြားကအတွင်းအကွာ၊ border ကဘောင်၊ margin ကအပြင်ဘက်အကွာအဝေးပါ။

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid red;
  margin: 30px;
  box-sizing: border-box;
}

Box တစ်ခုမှာ content width, padding, border, margin ပါလာမယ်။ box-sizing: border-box; ကြောင့် width တွက်ချက်တာပိုခန့်မှန်းရလွယ်ပါတယ်။