box-sizing ဂုဏ်သတ္တိ

box-sizing ဂုဏ်သတ္တိသည် အချက်၏အရွယ်အစားများကို တွက်ချက်ပုံနည်းလမ်းကို ပြောင်းလဲခွင့်ပြုပါသည်။

စံထားချက်အရ padding ထည့်သွင်းခြင်းသည် အချက်ကို ချဲ့ထွင်စေပါသည်။ အကယ်၍ ကျွန်ုပ်တို့သည် အကျယ် width ကို 100px နှင့် padding-left ကို 20px ဟုသတ်မှတ်ထားပါက၊ အချက်၏ တကယ့်အကျယ်သည် 120px ဖြစ်လာမည်ဖြစ်သည်။

ထို့အပြင် အကယ်၍ ကျွန်ုပ်တို့သည် border-left ကို 10px ဟုထပ်မံသတ်မှတ်ပါက၊ အချက်၏ တကယ့်အကျယ်သည် 130px ဖြစ်လာမည်ဖြစ်သည်။ ဆိုလိုသည်မှာ padding နှင့် border တို့သည် ဘလောက်ကို ချဲ့ထွင်စေပါသည် (အကျယ်နှင့် အမြင့်နှစ်ခုစလုံးတွင်)။ ဤအပြုအမူကို box-sizing ကိုအသုံးပြု၍ ပြောင်းလဲနိုင်ပါသည်။

ဝါကျဖွဲ့စည်းပုံ

ရွေးချယ်သူ {
	box-sizing: content-box | border-box;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`content-box`	`padding` နှင့် `border` နှစ်ခုစလုံးသည် ဘလောက်ကို ချဲ့ထွင်စေသည်။
`border-box`	`padding` သို့မဟုတ် `border` မည်သည်ကမျှ ဘလောက်ကို ချဲ့ထွင်မှုမပြုပါ။

စံထားချက်တန်ဖိုး: content-box.

နမူနာ . စံအပြုအမူ

လောလောဆယ် ဘလောက်နှစ်ခုစလုံးတွင် တူညီသောအမြင့်နှင့် အကျယ်ရှိသော်လည်း ဒုတိယဘလောက်တွင် padding သတ်မှတ်ထားပြီး ပထမဘလောက်တွင် မရှိပါ။ ၎င်းတို့၏အရွယ်အစားများ မည်သို့ကွဲပြားသည်ကို ကြည့်ရှုပါ။

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

#elem1 {
	width: 300px;
	height: 100px;
	margin-bottom: 10px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

နမူနာ . စံအပြုအမူ

လောလောဆယ် ဘလောက်နှစ်ခုစလုံးတွင် တူညီသောအမြင့်နှင့် အကျယ်ရှိသော်လည်း ဒုတိယဘလောက်တွင် 10px နယ်နိမိတ်မျဉ်း သတ်မှတ်ထားပြီး ပထမဘလောက်တွင် မရှိပါ။ ၎င်းတို့၏အရွယ်အစားများ မည်သို့ကွဲပြားသည်ကို ကြည့်ရှုပါ။

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

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

နမူနာ . စံအပြုအမူ

လောလောဆယ် ဒုတိယဘလောက်တွင် padding နှင့် 10px နယ်နိမိတ်မျဉ်း နှစ်ခုစလုံးရှိသည်။

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

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	border: 20px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

နမူနာ . border-box တန်ဖိုး

ဒုတိယအချက်အတွက် box-sizing ဂုဏ်သတ္တိ၏ border-box တန်ဖိုးကို ထည့်သွင်းကြည့်ပါမည်။ ယခုအခါ ပထမ နှင့် ဒုတိယ အချက် နှစ်ခုစလုံး၏ အရွယ်အစားများ တူညီသွားမည်ဖြစ်သည်။

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

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	box-sizing: border-box;
	padding: 50px;
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

ထပ်မံကြည့်ရှုရန်

outline ဂုဏ်သတ္တိ၊
အချက်ကို မချဲ့ထွင်သော နယ်နိမိတ်မျဉ်းကို ပြုလုပ်ပေးသည်