CSS တွင် padding အတွင်းပိုင်းအကွာအဝေးများနှင့် အလုပ်လုပ်ခြင်း

အချို့သောအရာဝတ္ထုတစ်ခုအား အကျယ် 100px သတ်မှတ်ပေးသည်ဆိုပါစို့။ CSS တွင် ဤသည်မှာ အရာဝတ္ထုသည် အမှန်တကယ် 100px အကျယ်ရှိမည်ဟု မဆိုလိုပါ။ အကြောင်းမှာ padding ထည့်သွင်းခြင်းသည် အရာဝတ္ထုကို ကျယ်ပြန့်စေပြီး ၎င်းသည် width ဂုဏ်သတ္တိတွင် ဖော်ပြထားသည်ထက် ကြီးလာသောကြောင့်ဖြစ်သည်။

ဥပမာတစ်ခုကြည့်ကြပါစို့။ အကျယ် 100 ပစ်ကယ်သတ်မှတ်မည့် ဘလောက်နှစ်ခုလုပ်ပါ။ ဒုတိယဘလောက်အတွက် padding သတ်မှတ်ပြီး ပထမဘလောက်အတွက် မသတ်မှတ်ပါ။ ရလဒ်အနေဖြင့် ဒုတိယဘလောက်သည် အကွာအဝေးအရွယ်အစားအတိုင်း ပိုကြီးနေပါလိမ့်မည်။

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  background: #f1f1f1;
  margin-bottom: 20px;
}

#elem2 {
  padding: 25px; /* အတွင်းပိုင်းအကွာအဝေးများ သတ်မှတ်သည် */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: