Box sizing

Použitelnost vlastnosti box-sizing

http://caniuse.com/#feat=css3-boxsizing

Co to dělá?

Tato CSS vlastnost sčítá všechny vnitřní vlastnosti jako padding a border pod šířku a na šířce tak ubírá (width).

Co to znamená?

Mějme blokový prvek <div>, jehož šířka je 200px. Nastavuji mu padding 10px a border na 1px. Za normálních podmínek je pak vizuelně celková šířka 222px (200 width, 10 padding zleva, 10 zprava, border 1 zleva, border 1 zprava).

Pokud použiju box-sizing, vizuelně bude šířka stále nastavených 200px s tím, že samotná width bude:

200 - 10 - 10 - 1 - 1

Fakticky tak šířka -> width bude 178px.

Kdy a kde to můžu použít?

Vzhledem k podpoře i v aplikacích Internet Explorer mohu používat libovolně kdykoliv a kdekoliv bude potřeba, viz. http://caniuse.com/#feat=css3-boxsizing

Podmínkou je použití prefixů -moz- a -webkit-

Jaký je zápis do CSS?

Jsou i jiná nastavení?

Ano jsou, ale podporováno napříč všemi prohlížeči je výhradně "border-box".

K čemu mi to bude?

Usnadní práci při dopočítávání velikosti prvků, kdy do svých výpočtu co a jak se kam vejde zahrnu jen width a nekomplikuju si výpočet s nějakými paddingy a bordery. Pokud pracuji s % u šířek, netrápí mě přičitávání #px borderu apod.

Započítává se do šířky i margin?

margin, tedy vnější odsazení se do šířky viz. výše nepočítá.