Mit der Eigenschaft display kann man die Darstellung von Elementen ändern. So kann man einem Inline- Element das Verhalten von Blockelementen zuweisen oder Div- Elementen die Eigenschaften von Tabellen mit Reihen und Spalten zuweisen. Man kann List- Elemente wie Inline- Elemente nebeneinander anordnen, um beispielsweise eine horizontale Navigation damit zu ermöglichen.
Man sollte dabei bedenken, dass die zugewiesenen HTML- Elemente immer semantischer Natur sind und nicht dazu eingesetzt werden sollten, das Aussehen einer Webseite zu bestimmen.
| Eigenschaft | Wert | HTML | Bedeutung |
|---|---|---|---|
| Standardwert | block | ||
| Vererbbar | nein | ||
| Anwendbar | Alle Elemente | ||
| display | none | keine Anzeige | |
| block | Blockelemente erzeugen einen neuen Absatz | ||
| inline | Darstellung als inline Element, Das Element fügt sich im Textfluß ein. | ||
| inline-block | Inline-Block Element. Es fügt sich im Textfluß ein, aber man kann eine Breite und Höhe vergeben, wie bei Bildern. | ||
| list-item | li | wie li Listenelement mit Aufzählungszeichen | |
| run-in | Block oder Inline Element abhängig vom Inhalt, 2013, Opera, Safari, IE9 | ||
| inline-table | Tabelle ohne Absatz | ||
| table | table | Tabelle | |
| table-caption | caption | Tabellenüberschrift | |
| table-cell | td, th | Tabellenzellen td oder th | |
| table-column | col | Tabellenspalte col | |
| table-column-group | colgroup | Tabellenspaltengruppe colgroup | |
| table-footer-group | tfoot | Tabellen Footer | |
| table-header-group | theader | Tabellen Header | |
| table-row | tr | Tabellenzeile | |
| table-row-group | tbody | Tabellenzeilengruppe | |
| flex | siehe dazu diese Seite | ||
Selbstverständlich werden die Inhalte, die man in ein Blockelement eingefügt hat, welches mit display:col ausgezeichnet wurde, nicht angezeigt. Siehe dazu die Bedeutung des col Elements in Html.
Beispiel 2 Spalten / das gleiche Beispiel mit semantisch korrekten Tags
Weitere Beispiele