Megjelenítés módja (display tulajdonság )

A display tulajdonság határozza meg a HTML elemhez generált doboz típusát. Ezen keresztül pedig megjelenítésének módját.

A display tulajdonság beállítása:

Lehetséges értékei:

blokk: a HTML elem blokk dobozt generál. (Egy téglalap alakú területet foglal le, és abban jeleníti meg az elem tartalmát.) A HTML elemere alkalmazhatók a dobozmodellnél megismert tulajdonságok (margin, padding), viszont a vízszintes igazítás (vertical-align) nem. A blokk dobozok mindig új sorba kerülnek kivéve az úsztatott elemeket (Lásd később.) Ha nincs előre beállított szélessége, akkor addig bővül, amíg vízszintesen kitölti a tárolódobozát. Ha nincs előre beállított magassága, akkor úgy bővül, ahogy a belső tartalom megkívánja.
- Példák: <p>, <div>, <form>, <header>, <nav>, <ul>, <li>, <h1>.

inline: sorközi folytonos elrendezésű inline dobozt/dobozokat generál. Sem előtte sem utána nem jön létre sortörés. Az inline doboz viszont törhető. (Pl egy két szavas szöveg első szava a sor végén, a második pedig a következő sor elején helyezkedik el.) Figyelmen kívül hagyja a felső és az alsó margó beállításokat, de alkalmazza a bal és a jobb margókat. Figyelmen kívül hagyja a szélesség és a magasság tulajdonságokat. Figyelembe veszi a vízszintes igazítást (vertical-align).
- Példák: <b>, <em>, <i>, <a>, <span>,<cite>, <mark>, <code>...

none: nem generál dobozt. Kikapcsolja a HTML elem és valamennyi gyermekelemének megjelenítését. Nem csupán láthatatlanná teszi az elemet, de számára helyet sem foglal le az oldalon.


inline-block: blokk dobozt generál. Blokk dobozként formázható de inline dobozként kerül elhelyezésre az oldalon. Sorközi folytonos elrendezése miatt szöveggel nem folyatható körbe.


list-item: egy blokk dobozt és egy külön lista-elem inline doboz generál. Ez utóbbiban jelenik meg a felsorolásjel.


inherit: A szülő elemtől örökölt érték.

Táblázatoknál használt értékek: table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption

Kísérleti fázisban lévő értékek: grid, inline-grid, run-in