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

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

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

#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;  /* ပြန့်ထွက်ခြင်းကို ဖယ်ရှားခြင်း */
}

ဖော်ပြပါ box-sizing ဂုဏ်သတ္တိကို ကိုယ်တိုင် စမ်းသပ်လေ့လာပါ။