Stil mit {stil}

Mar 09

CSS display • Darstellen und Verbergen von Elementen

display ändert die Aufbaustruktur eines Elements – beliebige Elemente können in Block-Tags, Inline-Tags oder Flow-Elemente umgewandelt werden.

Die am häufigsten verwendeten Werte sind display: none und display: block – CSS-Regeln, die ein Element sichtbar oder vollkommen unsichtbar machen. display: block macht ein Element nicht nur sichtbar, sondern führt auch dazu, dass ein Element einen Zeilenumbruch erzeugt. display: inline macht das Element zum Inline-Element ohne Zeilenumbruch.

display: none | display: block;

display: none unterdrückt die Darstellung eines Elements, so dass es keinen Raum im Dokument einnimmt (im Gegensatz zu der Eigenschaft visibility: hidden, die ein Element unsichtbar macht). display: block stellt ein Element als Blockelement dar und erzwingt, dass ein Element, für das display: none angegeben wurde, wieder sichtbar wird.

Der Wechsel zwischen display: none und display: block wird insbesondere für Effekte mit Javascript eingesetzt.

display: block | display: inline

display: block verwandelt ein Inline-Element (Element, das keinen Zeilenumbruch erzeugt) in ein Blockelement, das zu einem Zeilenumbruch führt. Umgekehrt transformiert die Eigenschaft display: inline ein Blockelement in ein Inline-Element.

ul.navleiste li { 
    display: inline; width: 120px; 
    border: 1px solid silver; float: left; 
}

• CSS
• HTML
• Tutorials
• Links

inline-block eignet sich gut, das label-Tag in Formularen in ein Blockelement ohne Zeilenumbruch umzuwandeln. So kann ein Formular in Spalten ohne aufwändige Tabellen aufgebaut werden.

display: inline-block wird von IE6 / IE7 nur unterstützt, wenn es sich bei dem Element um ein natives Inline-Element handelt.

Werte für display

IE4+ M1 N4+ O5+ S1 CSS1 – Ergänzt in CSS2 Erblich: Nein

display

block | compact | inline | inline-block | inline-table | list-item | marker | none | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | inherit

block stellt ein Element als Blockelement oder -box dar, das einen Zeilenumbruch vor und nach dem Element beinhaltet.

inline ist die Vorgabe und stellt ein Element als Inlineelement oder -box dar. Inlineelemente führen nicht zu einem Zeilenumbruch vor und nach dem Element. Mit anderen Worten: Das Element wird in der gleichen Zeile dargestellt.

inline-block (CSS2.1) erzeugt eine Blockbox, die innerhalb einer Inlinebox "fließt".

inline-table stellt eine Tabelle als Inlineelement oder -box dar, das nicht zu einem Zeilenumbruch vor und nach der Tabelle führt.

list-item stellt das Element als Liste dar. Jedem Element der Liste kann ein optionaler Listenpunkt wie ein gefüllter Kreis vorangesetzt werden.

marker weist dem Inhalt vor oder nach einem Boxelement einen Marker zu. marker wird zusammen mit den Pseudoelementen :after und :before benutzt.

none unterdrückt die Darstellung von Elementen. Wenn display:none gilt, muss der Browser alle Anweisungen für die Positionierung (sowohl position als auch float) ignorieren und generiert keine Box für das Element.

run-in stellt das Element abhängig vom Kontext als Block- oder Inlineelement dar.

table stellt ein Element als Blockelement dar.

table-caption stellt ein Element als Tabellenbeschriftung (caption) dar.

table-cell stellt das Element dar, als wäre es eine Tabellenzelle (td).

table-column stellt das Element dar, als wäre es eine Tabellenspalte (col).

table-column-group stellt das Element dar, als wäre es eine Gruppe von Tabellenspalten (colgroup).

table-footer-group stellt das Element dar, als wäre es eine Gruppe von Tabellen-Fußnoten (table footer).

table-header-group stellt das Element dar, als wäre es eine Gruppe von Tabellenköpfen (table header).

table-row stellt das Element dar, als wäre es eine Tabellenzeile (table row).

table-row-group stellt das Element dar, als wäre es eine Gruppe von Tabellenzeilen (table row).

zurück zum Seitenanfang