Výuka CSS

CSS vlastnost display určuje způsob zobrazení prvku. Je to extrémně důležitá vlastnost s mnoha rozmanitými hodnotami.

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
none	prvek se nezobrazí
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>
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é.
grid	prvek se zobrazí jako mřížka, která se může postupně naplnit dalšími prvky
flex	vnořené prvky budoudobře využívat volné místo

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ř. <deiv>, <p>), jiné řádkové (span>, strong>). (Tagy <ins> a <del> nejsou to ani to.)

Blokové prvky (display: block) za sebou dělají konec řádku a jde jim nastavit výška a šířka.

Řádkové prvky (display: inline) za sebou konec řádku nedělají, šířka a výška by jim neměla jít nastavit.

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