Nastavíš tlačítku šířku 200 px, a ono je na obrazovce širší. Nastavíš dvěma odstavcům mezeru 20 px a mezi nimi je zase jen 20 px, ne 40. Obojí má jedno vysvětlení: box model.
Prohlížeč vidí každý element jako obdélníkovou krabici. Kdo ví, z čeho se krabice skládá, umí přesně spočítat rozměry a rozložení stránky.
width: 200px;Představ si zarámovaný obraz. Uprostřed je malba. Kolem ní bílá paspartu. Pak dřevěný rám. A obrazy na zdi mezi sebou mají volné místo.
| Obraz | CSS | Vlastnost |
|---|---|---|
| malba | obsah (content) | width, height |
| paspartu | vnitřní okraj (padding) | padding |
| rám | rámeček (border) | border |
| místo mezi obrazy | vnější okraj (margin) | margin |
padding: 10px; – 10 px ze všech čtyř stran.border: 2px solid black;margin: 20px auto; – nahoře a dole 20 px, vlevo a vpravo automaticky (vycentruje blok).width. Výchozí content-box: šířka jen obsahu, padding a border se přičtou. border-box: šířka včetně paddingu a borderu.Mnoho webů nastaví * { box-sizing: border-box; }, aby se rozměry počítaly snadno.width: 200px; padding: 20px; border: 5px solid; a výchozí content-box. Jak široký je element na obrazovce?box-sizing: border-box. Jak široký je element a kolik zbude na obsah?Doplň vlastnost, která danou věc nastavuje.
margin: 20px mají mezi sebou 40 px.Tomu se říká slučování okrajů (margin collapsing). Vodorovné okraje se neslučují.
content-box se padding a border k width přičítají, při border-box jsou v ní. Svislé marginy sousedních bloků se slučují.Grafik pošle návrh: karta široká 300 px, uvnitř odsazení 16 px, rámeček 1 px a mezi kartami 24 px. Ty to musíš převést do CSS tak, aby rozměry seděly na pixel. Naučíme se to spočítat.
width a height (při výchozím nastavení).width: 300px;padding: 16px; border: 1px solid #ccc; margin: 24px;margin: 10px 20px 30px 40px; / padding: 8px 16px;div, p, h1) začíná na novém řádku a zabere celou šířku rodiče. Řádkový (span, a, strong) teče v textu a width, height ani svislé marginy na něj nepůsobí.display: inline-block; je kompromis: teče v řádku, ale rozměry mu nastavit jde.| box-sizing | Šířka na obrazovce | Šířka obsahu |
|---|---|---|
| content-box (výchozí) | width + padding L + P + border L + P | width |
| border-box | width | width − padding L + P − border L + P |
box-sizing.width: 300px; padding: 16px; border: 1px solid; (content-box). Šířka na obrazovce?box-sizing: border-box; a width: 300px;. Obsah: 300 − 32 − 2 = 266 px. Druhá možnost bez border-box: width: 266px.margin: 0 12px?padding: 10px 20px – nahoře a dole 10 px, vlevo a vpravo 20 pxmargin: 5px 10px 15px 20px – nahoře 5, vpravo 10, dole 15, vlevo 20 pxmargin: 0 auto – svisle 0, vodorovně auto: blok s danou šířkou se vycentrujeborder: 3px dashed red – červený přerušovaný rámeček 3 pxRozlušti zkrácený zápis a teprve pak kartu otoč.
Když jsou dva blokové elementy pod sebou, jejich svislé marginy se nesečtou. Výsledná mezera je větší z nich. Horní odstavec margin-bottom: 30px, dolní margin-top: 20px → mezera 30 px.
margin: 10px 20px = vlevo 10 px, vpravo 20 px.margin: 10px 20px = nahoře a dole 10 px, vlevo a vpravo 20 px.Zkrácený zápis začíná vždy nahoře. Se dvěma hodnotami je první svislá, druhá vodorovná.
content-box je skutečná šířka = width + padding + border; při border-box je to přímo width. Margin je místo kolem krabice a svislé marginy sousedních bloků se slučují na ten větší. Zkrácený zápis jde od horní strany po směru hodinových ručiček.