Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Aktualizovali jsme provozní podmínky. Pokračováním užívání sítě s nimi projevíte souhlas.
BF extended 2022

box-sizing - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti box-sizing nastavujeme co bude šířka a výška elementu zahrnovat. Vlastnost se dědí.

Hodnoty

  • content-box (výchozí) - Výška a šířka elementu zahrnuje pouze obsah. Vlastnosti padding, border nebo margin nejsou zahrnuty.
  • border-box - Výška a šířka elementu zahrnuje obsah a vlastnosti padding a border. Vlastnost margin není zahrnuta do těchto rozměrů.
  • initial - Nastaví vlastnost na výchozí hodnotu (tedy na content-box).
  • inherit - Hodnota se zdědí z rodičovského elementu.

Ukázka

Vytvořme si dva divy o rozměrech 300px × 100px s modrým, úzkým a plným rámečkem a s výplní 50px. Oba elementy budou mít okraj velký 10px (vlastnost margin). První div nebude nastavovat vlastnost box-sizing a druhý div bude mít u ní hodnotu border-box.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                div
                {
                        width: 300px;
                        height: 100px;
                        padding: 50px;
                        border: #3B94E0 1px solid;
                        margin: 10px;
                }
                .box-sizing
                {
                        box-sizing: border-box;
                }
                </style>
                <title>box-sizing</title>
        </head>
        <body>
                <div>Div bez vlastnosti box-sizing.</div>
                <div class="box-sizing">Div s vlastností box-sizing.</div>
        </body>
</html>

Výsledek:

Vlastnost box-sizing v CSS 3

 

Všechny články v sekci
Pozicování a velikost - CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity

 

 

Komentáře

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:16.8.2015 11:30

Tohle je velmi důležitá vlastnost zejména při tvorbě formulářů, jsem rád, že jí tu už máme popsanou :)

Odpovědět
16.8.2015 11:30
One of the most common causes of failure is the habit of quitting when one is overtaken by temporary defeat.
Avatar
Tomáš123
Člen
Avatar
Tomáš123:26.10.2015 20:46

Vlastnost se dědí.

Nededí. Ak musíme explicitne deklarovať rovnakú hodnotu (respektíve hodnotu inherit) nehovoríme o dedičnosti. Dedičná je napríklad vlastnosť text-align.

Výška a šířka elementu zahrnuje obsah a vlastnosti padding a border.

Prečo potom toto: http://kod.djpw.cz/cnrb ?

Zišlo by sa spomenúť, že ak nie je špecifikovaný rozmer, prvky sa správajú rovnako bez ohľadu na to, akú hodnotu majú nastavenú: http://kod.djpw.cz/dnrb.

Odpovědět
26.10.2015 20:46
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.