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

HTML a CSS Manuál Pozicování a velikost 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

 

  Aktivity (1)

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Miniatura
Všechny články v sekci
Pozicování a velikost - CSS vlastnosti

 

 

Komentáře

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

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
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Tomáš123
Člen
Avatar
Tomáš123:

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.