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 අගය

දෙවන මූලද්‍රව්‍යයට border-box අගය එකතු කරමු box-sizing ගුණය සඳහා. දැන් මාන පළමු සහ දෙවන මූලද්‍රව්‍ය දෙකම සමාන වේ:

<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 ගුණය,
මූලද්‍රව්‍යය පුළුල් නොකරන සීමාවක් සාදයි