Savybė box-sizing

Savybė box-sizing leidžia keisti elemento matmenų skaičiavimo būdą.

Pagal numatytuosius nustatymus padding pridedimas išplečia elementą: jei nustatėme plotį width 100px ir padding-left 20px, tai tikrasis elemento plotis bus 120px.

O jei nustatysime ir border-left 10px, tai tikrasis elemento plotis taps 130px. Tai yra, padding ir border išplečia bloką (ir plotį, ir aukštį). Šį elgesį galima pakeisti naudojant box-sizing.

Sintaksė

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

Reikšmės

Reikšmė	Aprašas
`content-box`	Ir `padding`, ir `border` išplečia bloką.
`border-box`	Nei `padding`, nei `border` neišplečia bloko.

Numatytoji reikšmė: content-box.

Pavyzdys . Standartinis elgesys

Dabar abu blokai turi tą patį aukštį ir plotį, tačiau antrajam blokui nustatytas padding, o pirmajam - ne. Pažiūrėkite, kaip skiriasi jų matmenys:

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

Pavyzdys . Standartinis elgesys

Dabar abu blokai turi tą patį aukštį ir plotį, tačiau antrajam blokui nustatyta sienelė 10px, o pirmajam - ne. Pažiūrėkite, kaip skiriasi jų matmenys:

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

Pavyzdys . Standartinis elgesys

Dabar antrasis blokas turi ir padding, ir sienelę 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;
}

Pavyzdys . Reikšmė border-box

Pridėsime antram elementui reikšmę border-box savybės box-sizing parametrui. Dabar matmenys ir pirmo, ir antro elemento taps vienodi:

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

Taip pat žiūrėkite

savybė outline,
kuri sukuria sienelę, neišplečiančią elemento