Lastnost box-sizing

Lastnost box-sizing omogoča spreminjanje načina izračuna dimenzij elementa.

Privzeto dodajanje padding razširi element: če smo nastavili širino width 100px in padding-left na 20px, bo dejanska širina elementa 120px.

In če nastavimo še border-left na 10px, bo dejanska širina elementa 130px. To pomeni, da padding in border razširjata blok (tako po širini kot po višini). To vedenje je mogoče spremeniti z box-sizing.

Sintaksa

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

Vrednosti

Vrednost	Opis
`content-box`	Tako `padding` kot `border` razširjata blok.
`border-box`	Niti `padding` niti `border` ne razširjata bloka.

Privzeta vrednost: content-box.

Primer . Standardno vedenje

Trenutno imata oba bloka enako višino in širino, vendar ima drugi blok nastavljen padding, prvi pa ne. Oglejte si, kako se razlikujejo njihove velikosti:

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

Primer . Standardno vedenje

Trenutno imata oba bloka enako višino in širino, vendar ima drugi blok nastavljeno obrobo 10px, prvi pa ne. Oglejte si, kako se razlikujejo njihove velikosti:

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

Primer . Standardno vedenje

Trenutno ima drugi blok tako padding kot obrobo 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;
}

Primer . Vrednost border-box

Dodajmo drugemu elementu vrednost border-box za lastnost box-sizing. Zdaj bodo velikosti tako prvega kot drugega elementa enake:

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

Glejte tudi

lastnost outline,
ki naredi obrobo, ki ne razširi elementa