BOX-SIZING – css vlastnost určující způsob výpočtu elementu

CSS vlastnost, která určuje, zda se padding (vnitřní odsazení) a border (rámeček) připočítávají k celkovému rozměru bloku HTML elementu (např. DIVu).

Funguje na moderních prohlížečích, které podporují CSS3 | není dědičná.

Způsob zápisu

Ukázka zápisu pro  <div>

div {
   box-sizing: border-box;
}

Vyhrazená slova používaná u selektoru box-sizing:

box-sizing:

• content-box – běžné chování, defaultní. V tomto režimu se k šířce a výšce navíc připočítává padding i border
• border-box – nastavuje režim, kdy se padding a border se nepřipočítává k width (šířce) a height (výšce). Určená šířka nebo výška jsou definitivní včetně padding a border.    

Příklad použití

Představte si situaci, kdy potřebujete vytvořit dva bloky HTML kódu (DIVy), které budou vedle sebe a každý bude zabírat polovinu okna prohlížeče. Pro ty, kteří již umí obtékání pomocí float, to asi není žádný problém. Jednoduše nastaví obtékání a současně nastaví šířku DIVu na 50%. O vlastnost box-sizing se začnete zajímat až v okamžiku, kdy budete potřebovat buď vytvořit odsazení pomocí vlastnosti padding, nebo rámeček pomocí border. Standardní výpočet šířky vám totiž ten padding (border) připočte navíc k celkové šířce. Šířka tedy bude víc, než 50%, což je malér, protože se ty dva DIVy vedle sebe nevejdou.

Někoho může napadnout řešení, že obtékané DIVy zadá na méně procent, než by měly být (z příkladu např. na 45%), což sice může zafungovat, ale rozhodně toto řešení nedoporučuji a už vůbec ne u responzivního designu. Je také možné vložit dovnitř každého obtékaného DIVu další DIV, kterému až nastavíte padding. Vložení dalšího DIVu fungovat bude bezvadně, ale nárůst počtu DIVů není zrovna sen kodéra, který se snaží o čistotu HTML.

Řešení

Nejlepším řešením je obtékaným DIVům nastavit box-sizing: border-box a klidně můžete použít např. tento zápis:

...
.vlevo{
   float: left;
   width: 50%;
   padding: 12px;
   box-sizing: border-box;
}
.vpravo{
   float: right;
   width: 50%;
   padding: 12px;
   box-sizing: border-box;
}
 ...
<div class="vlevo">
...
</div>
<div class="vpravo">
...
</div>

Kam dál

Naše služby Kurz základy HTML a CSS Kurz tvorby webových stránek pomocí systému Joomla Obecná pravidla CSS