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 касиети,
элементти кеңейтпөөчү чекти жасоочу