Tato vlastnost určuje, zda jsou vykresleny boxy generované prvkem, či nikoli. Neviditelné boxy ale stále ovlivňují vzhled dokumentu.

Normálně jsou všechny prvky viditelné, ale když se nastaví visibility: hidden, tak se prvek může vygumovat. Zůstane po něm prázdné místo. V tom se liší od display: none, protože co má display: none, po tom nezůstane ani to místo.

Visibility je méně náročná na výpočet, než display, proto se často používá v javascriptu pro mizení a zobrazování objektů (namísto náročnějšího display).

display

Vlastnost display určuje způsob formátování prvku. Možné hodnoty mají následující význam:

• block: prvek je blokový
• inline: prvek je řádkový
• inline-block: prvek je blokový, může obsahovat další blokové prvky, avšak sám se chová jako řádkový (podobně jako třeba obrázky)
• run-in: prvek run-in se chová dle kontextu jako blokový nebo řádkový
• compact: prvek compact se chová dle kontextu jako blokový nebo řádkový (viz. dále)
• list-item: prvek se formátuje jako položka uspořádaného či neuspořádaného seznamu
• table: prvek se formátuje jako tabulka
• table-cell: prvek se formátuje jako buňka tabulky
• inline-table: prvek se formátuje jako tabulka, avšak chová se jako řádkový (podobně jako třeba obrázky)
• none: prvek negeneruje vůbec žádný rám, chová se, jako by v dokumentu vůbec neexistoval

visibility

• povolené hodnoty: visible | hidden | colapse | inherit
• výchozí hodnota: inherit
• lze použít: všechny prvky
• dědí se: ne

Popis povolených hodnot:

• visible: generovaný box je viditeln
• hidden: generovaný box je neviditelný (zcela průhledný), ale stále ovlivňuje vzhled stránky (prvek ve stránce je, pouze není viditelný).
• colapse: používá se jen u řádků a sloupců tabulek (viz pozdější kapitolu). U ostatních prvků má stejný význam jako hidden.

Praxe

Vlastnost visibility se používá téměř výhradně pro účely skriptování. Pokud totiž chci na stránce něco skrýt, téměř vždy je lepší použít display: none. Visibility se hodí jenom v tom případě, kdy je třeba vyhradit pro skrytý prvek místo nebo ho rychle přepočítávat — změny visibility se počítají rychleji než display, protože neovlivňují zbytek stránky.

Budu mít skrytý text, u něhož chci, aby se při přejetí myší (onmouseover) zviditelnil:

Následující zápis dělá to samé s vlastností display, ale s prohlížeči to mnohem víc cuká: