Box model
display
Vlastnost display určuje, jak se element chová mezi ostatními: jestli začne na novém řádku, nebo plyne v textu.
Projdeme čtyři základní hodnoty: block, inline, inline-block a none. V náhledu vidíte, kam se dostaneme.
Výchozí chování
block a inline
Elementy dostaly pozadí, abychom viděli, kolik místa zabírají.
Blokové (div, p, h1, nav…) začínají na novém řádku a roztáhnou se na celou šířku. Inline (a, span, strong…) jsou jen tak široké jako jejich text a plynou za sebou.
Past
Inline element a padding
Odkazy v menu chceme jako větší tlačítka. Přidáme jim padding. Do stran se odsunou, ale nahoře a dole přetečou přes světlé pozadí menu a menu se nezvětší.
Inline element ignoruje width a height a svislý padding ani margin neodsouvá okolí.
Hodnota · 1
inline-block
Kříženec obou. Element zůstane v řádku vedle ostatních, ale chová se jako blok: respektuje šířku, výšku, padding i margin. Menu se teď kolem tlačítek správně roztáhne.
Ideální pro tlačítka, štítky a odkazy v menu.
Hodnota · 2
Blok vedle bloku
Funguje to i obráceně. Blokové div přepneme na inline-block a dáme jim šířku. Postaví se vedle sebe.
display nemění význam elementu, jen jeho chování. div zůstává div.
Hodnota · 3
none: jako by tam nebyl
Element zmizí a jeho místo zaberou ostatní. V HTML zůstává, jen se nevykreslí.
Pozor na rozdíl: visibility: hidden element taky skryje, ale jeho místo zůstane prázdné.
Responzivita
Na telefonu pod sebe
Na úzké obrazovce přepneme odkazy i týdny zpátky na block. Každý dostane celý řádek a na odkaz se dobře trefí palcem.
Takhle se display používá nejčastěji: stejné HTML, jiné chování podle šířky okna. Skrýt na mobilu jde i něco navíc, stačí display: none uvnitř @media.
Shrnutí
Čtyři hodnoty
block: nový řádek, celá šířkainline: v textu, jen tak široký jako obsahinline-block: v řádku, ale s rozměry, paddingem i marginemnone: nevykreslí se vůbec
Další dvě hodnoty, flex a grid, mění layout všech dětí najednou. Mají vlastní lekce v kategorii Layout.