Od provozovatele projektu Rychlost.CZ

box-sizing

Definice a použití

Vlastnost box-sizing určuje, zda je součástí šířky a výšky elementu i její vnitřní odsazení (padding) a okraj (border).

Hodnoty vstupůPopis
content-boxSoučástí šířky a výšky je pouze vnitřní obsah elementu (defaultní hodnota)
border-boxSoučástí šířky a výšky je i vnitřní odsazení (padding) a okraj (border)
initialNastaví hodnotu na defaultní
inheritDědí hodnotu od mateřského elementu
Ukázka:
CSS
/* CSS pro lepší čitelnost ukázky */
#box-sizing-border-box, #box-sizing-content-box {
background: #cc6e00;
text-align: center;
}
#box-sizing-border-box > div, #box-sizing-content-box > div {
height: 100%;
background: #ccb600;
}
/* Součástí šířky a výšky je i padding a border. Vnitřní šířka a výška je tedy o tyto hodnoty menší */
#box-sizing-border-box {
width: 50px;
height: 50px;
padding: 10px;
border: 5px solid #00cc30;
box-sizing: border-box;
}
/* Nastavená šířka a výška je pouze pro vnitřní obsah. Dále je element rozšířený o padding a border */
#box-sizing-content-box {
width: 50px;
height: 50px;
padding: 10px;
border: 5px solid #00cc30;
box-sizing: content-box;
}
Použité vlastnosti: background, text-align, height, width, padding, border, box-sizing
HTML
Součástí šířky a výšky je i padding a border. Vnitřní šířka a výška je tedy o tyto hodnoty menší:
<div id="box-sizing-border-box">
<div>box</div>
</div>
<br/>
Nastavená šířka a výška je pouze pro vnitřní obsah. Dále je element rozšířený o padding a border:
<div id="box-sizing-content-box">
<div>box</div>
</div>
Použité tagy: <div>

Výsledek:

Součástí šířky a výšky je i padding a border. Vnitřní šířka a výška je tedy o tyto hodnoty menší:
box

Nastavená šířka a výška je pouze pro vnitřní obsah. Dále je element rozšířený o padding a border:
box

Podpora webových prohlížečů

Firefoxversion: 29
Internet Explorerversion: 8
Google Chromeversion: 10
Safariversion: 5
Operaversion: 9