CSS-Eigenschaft display : Art der Darstellung festlegen

Art der Darstellung: CSS Property display

Die Elemente einer Webseite lassen sich grob in zwei Haupt-Kategorien einteilen – Block-Elemente und Inline-Elemente. Block-Elemente erzeugen einen eigenen Absatz, d.h. sie erzeugen einen Zeilenumbruch vor und nach dem Element.

Die wichtigsten und meist genutzten HTML Blockelemente sind:

Überschriften (H1 - H6).Absätze (P).Listen (UL & OL).Tabellen (TABLE).Bereich (DIV)

CSS-Eigenschaft: position

Beschreibungmögliche WerteStandardwertKategorie
Art der Darstellungblock
inline
inline-block
table
none
grid
flex
initial
inherit		inlineBildschirm
Positionierung

Die Angabe in oranger Schrift ist die Standardanwendung dieser CSS-Eigenschaft.

Es gibt noch mehr Werte für display. Aus Gründen der Übersichtlichkeit gehe ich auf diese eher selten benutzten Werte an dieser Stelle nicht ein.

Mit der CSS-Eigenschaft display kann man das Verhalten eines HTML-Elements ändern. Die typische Verwendung von display sind die Eigenschaften

Für jedes HTML-Element erzeugt der Browser eine Box und weist ihr das grundlegende Verhalten zu. Durch die CSS-Eigenschaft »display« kann dieses Verhalten geändert werden.

Beachte:

  1. Mit der Eigenschaft »display« lässt sich der Typ eines HTML-Elements (Block-Element oder Inline-Element) nicht ändern. Nur das Verhalten des HTML-Elements wird geändert. Block-Elemente bleiben Block-Elemente und Inline-Elemente bleiben Inline-Elemente. Die allgemeine Regel, dass Block-Elemente nicht in Inline-Elemente platziert werden dürfen, gilt nach wie vor.

  2. Die Eigenschaft »display« wird benutzt, wenn für ein Inline-Element das Verhalten eines Block-Elements benötigt wird.

    Oder wenn für ein Block-Element das Verhalten eines Inline-Elements notwendig ist.

  3. Block-Elemente erzeugen einen eigenen Absatz. D.h. vor und nach dem HTML-Element wird gemäß Standard ein automatischer Zeilenumbruch (d.h. eine neue Zeile) eingefügt. Man nennt dies auch Zeilenvorschub bzw. Englisch »Linefeed«.

  4. Inline-Elemente erzeugen keinen eigenen Absatz. D.h. der normale Textfluss wird nicht unterbrochen. Ein Inline-Element ist stets nur so breit wie für den Inhalt notwendig. Inline-Elemente werden standardmäßig nebeneinander positioniert.

  5. Ein Element mit der Eigenschaft display: inline-block ist ein Inline-Element. Es ist aber möglich mit Margin einen Außenabstand und mit Padding einen Innenabstand zu definieren.

  6. Eine für die Praxis wichtige Deklaration ist display: none. Diese Deklaration legt fest, dass für das Element keine Box erzeugt werden soll. Das mit »display: none« ausgeblendete Element hat gar keinen Einfluss auf folgende Elemente des Layouts.

    Mit »display: none« ausgeblendete Elemente können mit jedem anderen Wert wieder eingeblendet werden.

    Im Gegensatz zu »display: none« erzeugt visibility: hidden für das Element eine vollständig transparente Box. Mit »visibility: hidden« ausgeblendete Elemente haben Einfluss auf nachfolgende Elemente.

CSS-Layouts mit display, position und float

Die Eigenschaften display, position und float ermöglichen CSS-basierte Layouts. Normalerweise werden die HTML-Elemente je nach Element-Typ untereinander (Block-Elemente) oder nebeneinander (Inline-Elemente) positioniert. Die Breite der Block-Elemente wird dabei jeweils durch das übergeordnete Element bestimmt.

Durch gezielte Definitionen lassen sich die Boxen und alle anderen Elemente auf der Webseite beliebig ausrichten. Dazu muss für jedes Element die Standard-Ausrichtung außer Kraft gesetzt und neu definiert werden.

Dieses Muster-Template demonstriert die Positionierung mit display, position und float am Beispiel eines responsiven Zwei Spalten Standard Layouts.