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 қасиеті,
элементті кеңейтпейтін шекара жасайды