Display

CSS vlastnost display určuje způsob zobrazení prvku.

display
hodnoty základní způsoby zobrazení prvku
block prvek se zobrazí jako blok, to jest s řádkovým zlomem na konci
inline prvek se zobrazí jako kus řádku, to jest bez řádkového zlomu na konci
inline-block prvek se zobrazí jako kus řádku bez zlomu na konci, jdou mu nastavit rozměry
list-item prvek by se měl zobrazit jako položka seznamu, tj. jako tag <li>
run-in prvek za sebou nebude mít řádkový zlom, jinak se chová jako block
tabulkové hodnoty prvky se zobrazí jako části tabulky. Jde o hodnoty table, inline-table, table-caption, table-cell, table-column-group, table-footer-group, table-header-group, table-row a table-row-group. Dle mého názoru málo použitelné.
flex vnořené prvky budou dobře využívat volné místo
none prvek se nezobrazí

Block a inline = blokové a řádkové prvky

Výchozí zobrazení je block, inline nebo list-item podle toho, jaký se použije html tag. Některé tagy se od přirozenosti zobrazují blokové (např. <div>, <p>), jiné řádkové (<span>, <strong>). (Tagy <ins> a <del> nejsou to ani to.)

Vlastností display se dají z řádkových prvků dělat blokové a naopak. Například odkaz (tag <a>) je prvek řádkový. Zápisem

a {display: block}

se z odkazů udělají prvky blokové = bude za nimi zalomený řádek a půjdou jim nastavit rozměry.

Display: inline-block

Velice kouzelná hodnota. Způsobí, že se z prvku stane řádkový prvek, kterému ale půjdou nastavit rozměry (výška height a šířka width), rámeček, padding a margin. Potom se prvek bude chovat velmi podobně, jako se normálně chovají obrázky (tag <img>) -- sedí na řádku, ale mají své rozměry.

Teprve u prvků, které mají nastaveno inline-block, má smysl širší použití vlastnosti vertical-align.

Display: list-item

Tag <li> se zobrazuje jako list-item, to znamená položku seznamu. I z jiných tagů (např. div) lze udělat položku seznamu, ale jen jsou-li obklopeny tagy <ul>, <ol>, <dir> nebo <menu>. Příklad: test vlastnosti display: list-item. Z jiného tagu se zápisem display: list item dá udělat položka seznamu (s číslem nebo odrážkou, to se nastavuje pomocí list-style-type), ale funguje to pouze v moderních prohlížečích.

Display: none

Prvky dokumentu lze skrýt pomocí display: none. Jde o úplné skrytí, ne pouze o zneviditelnění jako při visibility: hidden. Po prvku nezůstane volné místo (což po visibility: hidden zůstane). Prohlížeče prvky skryté pomocí display: none normálně stahují, pouze Opera 7 je nestahuje. Možná si říkáte, k čemu je dobré dávat do stránky prvky, které se nezobrazí. Je to dobré na práci s javascriptem a v hektické praxi také na skrývání věcí, které prostě ještě nejsou hotové. Další uplatnění se najde při tisku, kdy se prostě některé věci na obrazovce viditelné na tisk nepošlou.

Zděděné nezobrazení nelze přetlouct. Pokud mám např. skrytý (display: none) celý vnější prvek, vnitřní prvky, které obsahuje, nelze nijak zobrazit žádnou hodnotou vlastnosti display. Pokud je takové chování potřeba, musí se to zkusit s visibility: hidden (tip: nastavit tomu absolutní pozici).

Stejný efekt jako display: none; se dá udělat pomocí html atributu hidden. Hidden je součástí HTML 5 a už je dobře podporován v prohlížečích.

Tabulkové hodnoty

Tabulkové hodnoty fungují v Mozille a Opeře, Chromu a v IE od verze 8. Jejich význam je doufám celkem zřejmý. Jsou to hodnoty: table, table-row-group, table-header-group, table-footer-group, table-cell, table-column, table-column-group, table-caption. Hodnota display: inline-table má udělat tabulku ležící na řádku, ale Mozilla ji vykreslí jako display: table (uvádí Pixy). Hodnoty display: table používám např. v řešení univerzálního vertikálního centrování.

Má-li něco display: table-caption nebo je-li to tag <caption> v tabulce, pak na to lze uplatit vlastnost caption-side s hodnotami top nebo bottom.

Display: flex

S vymizením Internet Exploreru 10 začne být extrémně zajímavá hodnota display: flex. Zařídí, že všechny vnořené prvky budou předepsaným způsobem využívat volné místo prvku. Odkaz na návod na flexbox (anglicky).

Další hodnoty vlastnosti display

V moderních prohlížečích fungují také další hodnoty vlastnosti display. Jde o hodnoty compact, run-in, marker a hodnoty pro tabulkové vykreslení.

Jakmile čemukoliv nastavíte float rozdílné od none, stává se to blokovým prvkem (jakoby display: block).

Podpora

Podpora vlastnosti display
Prohlížeč Podpora hodnot ve verzích
hodnota none přepnutí list-item, block a inline hodnota inline-block hodnoty table-*

Internet Explorer

ano ano ve verzi 6 pouze pro řádkové prvky od verze 8
Firefox ano ano ano ano
Chrome, Opera ano ano ano ano

Příklady

Skrytí prvku

Často se display: none používá na skrytí prvků, které mají být vidět na zařízeních bez podpory kaskádových stylů (různé mobily, roboti apod.). Do takových prvků se někdy umisťují hlášky o tom, že "máte debilní prohlížeč bez podpory CSS", nebo raději (protože ta předchozí hláška není moc qěci) pomocné navigační prvky. Říká se tomu skrytá navigace:

<a href="#zacatek" style="display: none">přeskočit navigaci</a>

Takový prvek je v normálních prohlížečích neviditelný.

Převod na blokový element

Pokud chci mít pod sebou několik odkazů, můžu je prostrkat řádkovými zlomy (tag <br>). Není to však třeba prostrkávat, stačí nastavit takovým odkazům (tagům <a>, které jsou normálně řádkové) display: block a udělat z nich tak blokové prvky.

Takhle budou odkazy v řádku:

<div class="menu">
<a href="prvni.html">První odkaz</a>
<a href="druhy.html">Druhý odkaz</a>
<a href="treti.html">Třetí odkaz</a>...
</div>

Po přidání stylu se odkazy zalámají pod sebe:

<style>
.menu a {display: block}
</style>

Poslední aktualizace 18. 2. 2016

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.