Īpašība box-sizing

Īpašība box-sizing ļauj mainīt elementa izmēru aprēķināšanas veidu.

Pēc noklusējuma padding pievienošana paplašina elementu: ja mēs esam iestatījuši platumu width 100px un padding-left uz 20px, tad elementa reālais platums būs 120px.

Un ja mēs iestatīsim arī border-left uz 10px, tad elementa reālais platums kļūs 130px. Tas ir, padding un border paplašina bloku (gan platumā, gan augstumā). Šo uzvedību var mainīt, izmantojot box-sizing.

Sintakse

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

Vērtības

Vērtība	Apraksts
`content-box`	Gan `padding`, gan `border` paplašina bloku.
`border-box`	Ne `padding`, ne `border` paplašina bloku.

Noklusējuma vērtība: content-box.

Piemērs . Standarta uzvedība

Šobrīd abiem blokiem ir vienāds augstums un platums, tomēr otrajam blokam ir iestatīts padding, savukārt pirmajam - nav. Paskatieties, kā atšķiras to izmēri:

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

Piemērs . Standarta uzvedība

Šobrīd abiem blokiem ir vienāds augstums un platums, tomēr otrajam blokam ir iestatīts apmale 10px, savukārt pirmajam - nav. Paskatieties, kā atšķiras to izmēri:

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

Piemērs . Standarta uzvedība

Šobrīd otrajam blokam ir gan padding, gan apmale 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;
}

Piemērs . Vērtība border-box

Pievienosim otrajam elementam vērtību border-box īpašībai box-sizing. Tagad gan pirmā, gan otrā elementa izmēri kļūs vienādi:

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

Skatiet arī

īpašība outline,
kura veido apmali, kas nepaplašina elementu