Velikost boxu

Seznam plemen má width: 250px a height: 220px, ale od té doby, co jsme přidali polstrování, zabírá víc místa. Šířka a výška totiž ve výchozím stavu určují jen velikost obsahu a polstrování s rámečkem se k ní přičítají. Seznam plemen je proto široký 250 + 2 × 20 + 2 × 2 = 294 pixelů (obsah, polstrování na obou stranách a rámeček na obou stranách) a vysoký 220 + 2 × 20 + 2 × 2 = 264 pixelů.

Určuje to vlastnost box-sizing (způsob počítání velikosti boxu), jejíž výchozí hodnota je content-box. Není to moc praktické: kdykoli změníte polstrování nebo rámeček, změní se velikost celého prvku. Proto existuje hodnota border-box. S ní width a height zahrnují i polstrování a rámeček a zmenší se místo toho obsah.

Oba boxy níže mají width: 200px, padding: 20px a rámeček široký 1 pixel. První má box-sizing: content-box a je široký 242 pixelů, druhý má box-sizing: border-box a je široký 200 pixelů:

Okraj se do velikosti nikdy nezapočítává: je to místo vně rámečku.

Protože se s border-box pracuje mnohem snáz, začíná mnoho souborů se styly tímto pravidlem, které ho nastaví všem prvkům:

* {
	box-sizing: border-box;
}

Na naší stránce se tím změní jen seznam plemen. Ostatní karty nemají nastavenou šířku, takže jsou široké jako jejich rodič a polstrování s rámečkem se do nich vždy vejdou.

Tip: Velikosti si můžete ověřit pomocí volby Prozkoumat: nástroje pro vývojáře ukážou box model vybraného prvku se všemi čísly.