Ominaisuus box-sizing

Ominaisuus box-sizing mahdollistaa elementin koon laskentatavan muuttamisen.

Oletusarvoisesti padding:in lisääminen laajentaa elementtiä: jos olemme asettaneet leveyden width:iksi 100px ja padding-left:in 20px:ksi, niin elementin todellinen leveys tulee 120px:ksi.

Ja jos asetamme myös border-left:in 10px:ksi, niin elementin todellinen leveys tulee 130px:ksi. Eli padding ja border laajentavat lohkoa (sekä leveyttä että korkeutta). Tätä käyttäytymistä voidaan muuttaa box-sizing-ominaisuudella.

Syntaksi

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

Arvot

Arvo	Kuvaus
`content-box`	Sekä `padding` että `border` laajentavat lohkoa.
`border-box`	Ei `padding` eikä `border` laajenna lohkoa.

Oletusarvo: content-box.

Esimerkki . Oletuskäyttäytyminen

Molemmilla lohkoilla on nyt sama korkeus ja leveys, mutta toisella lohkolla on asetettu padding kun taas ensimmäisellä ei ole. Katso, kuinka niiden koot eroavat:

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

Esimerkki . Oletuskäyttäytyminen

Molemmilla lohkoilla on nyt sama korkeus ja leveys, mutta toisella lohkolla on asetettu 10px reuna kun taas ensimmäisellä ei ole. Katso, kuinka niiden koot eroavat:

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

Esimerkki . Oletuskäyttäytyminen

Nyt toisella lohkolla on sekä padding että reuna 10px:nä:

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

Esimerkki . Arvo border-box

Lisätään toiselle elementille arvo border-box ominaisuuteen box-sizing. Nyt sekä ensimmäisen että toisen elementin koot tulevat samanlaisiksi:

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

Katso myös

ominaisuus outline,
joka tekee reunan, joka ei laajenna elementtiä