WebDev.wiki > CSS > CSS vlastnosti a hodnoty > box-sizing

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-box	Součástí šířky a výšky je pouze vnitřní obsah elementu (defaultní hodnota)
border-box	Součástí šířky a výšky je i vnitřní odsazení (padding) a okraj (border)
initial	Nastaví hodnotu na defaultní
inherit	Dě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