CSS တွင် အစိတ်အပိုင်းများ ပြန့်ထွက်ခြင်းကို ပယ်ဖျက်ခြင်း

ယေဘုယျအားဖြင့်၊ ယခင်သင်ခန်းစာများတွင် ဖော်ပြခဲ့သော ပြန့်ထွက်ခြင်းသည် မကောင်းသော သက်ရောက်မှုရှိပြီး သင်သည် ၎င်းကို ဖယ်ရှားလိုပေလိမ့်မည်။ ဤအတွက် CSS တွင် box-sizing ဆိုသော ဂုဏ်သတ္တိတစ်ခုရှိသည်။ အကယ်၍ ၎င်းကို border-box တန်ဖိုးပေးပါက၊ padding သို့မဟုတ် နယ်နိမိတ်မျဉ်းသည် ဘလောက်ကို ပြန့်ထွက်စေမည်မဟုတ်ပါ။

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

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

#elem2 {
  width: 100px;
  height: 100px;
  background: #f1f1f1;
  padding: 25px; /* နယ်နိမိတ်အကွာအဝေးများ သတ်မှတ်ခြင်း */
  border: 10px solid green;  /* နယ်နိမိတ်မျဉ်း သတ်မှတ်ခြင်း */
  box-sizing: border-box;  /* ပြန့်ထွက်ခြင်းကို ဖယ်ရှားခြင်း */
}

Результат: