Omadus box-sizing

Omadus box-sizing võimaldab muuta elemendi mõõtmete arvutamise viisi.

Vaikimisi lisatud padding laiendab elementi: kui me määrasime laiuse width 100px ja padding-left väärtuseks 20px, siis tegelik elemendi laius on 120px.

Ja kui me määrame ka border-left väärtuseks 10px, siis tegelik elemendi laius saab 130px. See tähendab, et padding ja border laiendavad plokki (nii laiuse kui kõrguse poolest). Seda käitumist saab muuta kasutades box-sizing.

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`content-box`	Nii `padding` kui ka `border` laiendavad plokki.
`border-box`	Ei `padding` ega `border` laienda plokki.

Vaikeväärtus: content-box.

Näide . Standardne käitumine

Praegu on mõlemal plokil sama kõrgus ja laius, kuid teisel plokil on padding määratud, esimesel aga mitte. Vaadake, kuidas nende mõõtmed erinevad:

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

Näide . Standardne käitumine

Praegu on mõlemal plokil sama kõrgus ja laius, kuid teisel plokil on määratud piir väärtusega 10px, esimesel aga mitte. Vaadake, kuidas nende mõõtmed erinevad:

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

Näide . Standardne käitumine

Praegu on teisel plokil nii padding kui ka piir väärtusega 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;
}

Näide . Väärtus border-box

Lisame teisele elemendile väärtuse border-box omadusele box-sizing. Nüüd saavad mõlema elemendi mõõtmed samaks:

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

Vaata ka

omadus outline,
mis teeb piiri, mis ei laienda elementi