display (CSS Lexikon)
letzte Änderung am 25.07.2009
Code:
Mit display (Anzeigeart) gibt man an, ob ein Elemenent als Inline-Element, als Block-Element oder gar nicht angezeigt werden soll.
Man unterscheidet Block-Elemente und Inline-Elemente (siehe normal flow):
Block-Elemente wie z.B. div, table, ul/ol, h1-h6, bilden einen eigenen Absatz,
Inline-Elemente wie z.B. span, a, img, input, fließen wie Wörter in der Zeile mit.
Ein Beispiel für die Anwendung sind Links in einer Navigation. Per Voreinstellung des Browsers sind Links Inline-Elemente. Ihre Breite richtet sich nach ihrem Inhalt, Werte für 'width' werden ignoriert. Mit display:block nehmen die Links jedoch wie Block-Elemente die gesamte Breite ein:

Quelle: W3C CSS 2.1: 9.2 Controlling box generation
>> Allgemeine Fragen oder Probleme mit dem Lexikon-Begriff? Hier gehts zum Forum!
display: inline | block | none | inline-block | ...
Mit display (Anzeigeart) gibt man an, ob ein Elemenent als Inline-Element, als Block-Element oder gar nicht angezeigt werden soll.
- inline: Das Element wird wie ein Inline-Element angezeigt.
- block: Das Element wird wie ein Block-Element angezeigt.
- none: Das Element wird gar nicht angezeigt - ohne Platzhalter, es wird keine Box für dieses Element erzeugt. (visibility:hidden verbirgt das Element mit Platzhalter.)
Daneben gibt es eine Reihe weiterer Möglichkeiten, z.B. - inline-block: Das Element verhält sich nach innen wie eine Block-Box, so dass Angaben von height und vertikalem margin möglich sind, fließt aber selbst wie ein Inline-Element in der Zeile mit.
Man unterscheidet Block-Elemente und Inline-Elemente (siehe normal flow):
Block-Elemente wie z.B. div, table, ul/ol, h1-h6, bilden einen eigenen Absatz,
Inline-Elemente wie z.B. span, a, img, input, fließen wie Wörter in der Zeile mit.
Ein Beispiel für die Anwendung sind Links in einer Navigation. Per Voreinstellung des Browsers sind Links Inline-Elemente. Ihre Breite richtet sich nach ihrem Inhalt, Werte für 'width' werden ignoriert. Mit display:block nehmen die Links jedoch wie Block-Elemente die gesamte Breite ein:

Quelle: W3C CSS 2.1: 9.2 Controlling box generation
>> Allgemeine Fragen oder Probleme mit dem Lexikon-Begriff? Hier gehts zum Forum!