CSS Display

Grundprinzip

Die Eigenschaft display bestimmt, wie ein Element im Layout dargestellt wird.

Sie entscheidet zum Beispiel:

Beginnt das Element in einer neuen Zeile?
Kann ich width und height setzen?
Verhält es sich wie Text (inline) oder wie eine Box (block)?

HTML-Elemente

Standardverhalten von HTML-Elementen

HTML-Elemente besitzen ein voreingestelltes Anzeigeverhalten. Dieses Standardverhalten bestimmt, wie sie sich im Layout verhalten – noch bevor CSS eingesetzt wird. Die meisten Elemente sind entweder Block-Elemente oder Inline-Elemente

Block-Elemente (Standard)

beginnen in einer neuen Zeile
nehmen standardmässig die volle verfügbare Breite ein
können width, height, margin und padding verwenden
können Block- und Inline-Elemente enthalten

Typische Beispiele: <div> | <section> | <p> | <h1>–<h6>

Inline-Elemente (Standard)

bleiben im Textfluss
beginnen nicht in einer neuen Zeile
ignorieren width und height
enthalten meist Text oder andere Inline-Elemente

Typische Beispiele: <span> | <a> | <strong> | <img>

Wichtig: Mit der CSS-Eigenschaft display kann dieses Standardverhalten verändert werden.

Display Werte

display: inlineBleibt im Textfluss, ignoriert width und height.
display: blockNeue Zeile, volle Breite, verhält sich wie eine Box.
display: inline-blockInline wie Text, aber mit width und height.
display: noneElement wird komplett aus dem Layout entfernt.
display: flow-rootEigene Layout-Box, kapselt Floats.
display: flexAktiviert Flexbox für flexible Anordnung.
display: gridAktiviert Grid für zweidimensionale Layouts.

Beispiele

display: inline

bleibt im Textfluss
beginnt nicht in einer neuen Zeile
ignoriert width und height

Wichtig: Auch Inline-Elemente unterliegen dem Box Model. Einige Eigenschaften wie margin-top, margin-bottom oder width verhalten sich jedoch anders. Details dazu im Kapitel „Box Model“.

`li` als `inline`

Listenelemente (ul / li) sind standardmässig verschachtelte Blockelemente.

Kurs
Workshop
Masterclass

ul.oneline {
    padding: 0;
    margin: 0 0 20px;
    }

ul.oneline li{
    display: inline;
    border: 1px solid salmon;
    padding: 10px;
}

So wird aus einer vertikalen Liste eine horizontale Navigation. Beachte den White-Space zwischen den Elementen. Die Aufzählungspunkte verschwinden, weil li nicht mehr das Standard-Display list-item verwendet.

display: block

beginnt immer in einer neuen Zeile
nimmt standardmäßig die volle verfügbare Breite ein
akzeptiert width, height, margin, padding

`display: block` mit `:hover`

Intensivstation

a.block{
    display: block;
    border: 1px solid salmon;
    padding: 10px;
}
a.block:hover{
    background: salmon;
}

Der Link ist ein inline-Element und wird zu einem Block-Element. Dadurch ist der gesamte Bereich klickbar – ideal für Navigationen.

display: inline-block

inline-block verhält sich wie Text, kann aber wie eine Box dimensioniert werden:

bleibt im Textfluss (wie inline)
akzeptiert width und height (wie block)
ideal für Navigationen, Buttons und kleine Layout-Module

`display: inline-block` mit `:hover`

Intensivstation Intensivstation

a.i-block{
    display: inline-block;
    border: 1px solid salmon;
    padding: 10px;
}
a.i-block:hover{
    background: salmon;
}

Wichtig: Zwischen inline-block-Elementen entsteht ein White-Space wie zwischen Wörtern im Text.

`display: none`

Das Element wird vollständig aus dem Layout entfernt:

nimmt keinen Platz ein
ist nicht sichtbar

Unterschied zu visibility: hidden: Das Element bleibt im Layout, ist aber unsichtbar.

Wird häufig in Kombination mit JavaScript genutzt, um Elemente ein- und auszublenden. Mit CSS sind dabei keine Übergänge möglich, da display nicht animierbar ist.

`display: flow-root` (Bonus)

Erzeugt einen eigenen Layout-Kontext. Inhalte wie float werden sauber innerhalb des Elements eingeschlossen.

Hilfreich, wenn ein Element seine Höhe korrekt um gefloatete Inhalte bilden soll.

Ohne flow-root (Elternhöhe kann kollabieren):

float

Dieser Text läuft neben der gefloateten Box. Je nach Inhalt wirkt es so, als hätte der Rahmen keine Höhe.

Mit display: flow-root (Float wird sauber „eingeschlossen“):