Box-sizing xususiyati

box-sizing xususiyati element o‘lchamlarini hisoblash usulini o‘zgartirish imkonini beradi.

Standart holda padding qo‘shish elementni kengaytiradi: agar biz kenglikni width 100px va padding-left ni 20px deb belgilasak, unda elementning haqiqiy kengligi 120px bo‘ladi.

Agar biz border-left ni ham 10px deb belgilasak, unda elementning haqiqiy kengligi 130px bo‘ladi. Ya'ni padding va border blokni kengaytiradi (ham kenglik, ham balandlik bo‘yicha). Ushbu xatti-harakatni box-sizing yordamida o‘zgartirish mumkin.

Sintaksis

selektor {
	box-sizing: content-box | border-box;
}

Qiymatlar

Qiymat	Tavsif
`content-box`	Ham `padding`, ham `border` blokni kengaytiradi.
`border-box`	Na `padding`, na `border` blokni kengaytiradi.

Standart qiymat: content-box.

Misol . Standart xatti-harakat

Hozir ikkala blok ham bir xil balandlik va kenglikka ega, biroq ikkinchi blokda padding berilgan, birinchisida esa yo‘q. Ularning o‘lchamlari qanday farq qilishiga e'tibor bering:

<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;
}

Misol . Standart xatti-harakat

Hozir ikkala blok ham bir xil balandlik va kenglikka ega, biroq ikkinchi blokda 10px chegarasi berilgan, birinchisida esa yo‘q. Ularning o‘lchamlari qanday farq qilishiga e'tibor bering:

<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;
}

Misol . Standart xatti-harakat

Hozir ikkinchi blokda ham padding, ham 10px chegarasi mavjud:

<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;
}

Misol . Border-box qiymati

Ikkinchi elementga box-sizing xususiyati uchun border-box qiymatini qo‘shamiz. Endi ham birinchi, ham ikkinchi elementning o‘lchamlari bir xil bo‘ladi:

<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;
}

Shuningdek qarang

outline xususiyati,
elementni kengaytirmaydigan chegarani yaratadi