http://caniuse.com/#feat=css3-boxsizing
Tato CSS vlastnost sčítá všechny vnitřní vlastnosti jako padding a border pod šířku a na šířce tak ubírá (width).
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.
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-
Ano jsou, ale podporováno napříč všemi prohlížeči je výhradně "border-box".
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.
margin, tedy vnější odsazení se do šířky viz. výše nepočítá.