display

display ist eine der wichtigsten CSS-Eigenschaften überhaupt. Sie bestimmt, wie ein Element im Dokument dargestellt wird und wie es sich gegenüber seinen Nachbarn verhält. Jedes HTML-Element hat einen Standard-Display-Typ: <div> ist block, <span> ist inline. Mit display kannst du dieses Verhalten ändern, ein Element komplett ausblenden (none) oder einen neuen Formatierungskontext erzeugen (flow-root). Werte wie flex und grid werden in eigenen Artikeln behandelt.

Steckbrief display

Syntax: display: block | inline | inline-block | none | contents | flow-root | flex | grid | ...
Initialwert: abhängig vom Element (block oder inline)
Vererbt: Nein
Animierbar: Nein

Kategorie: Display & Sichtbarkeit
Werte: 8
Beispiele: 4
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

Grundlagen

Jeder Display-Wert hat eigentlich zwei Funktionen: Er definiert den äußeren Display-Typ (wie verhält sich das Element gegenüber seinen Geschwistern) und den inneren Display-Typ (wie werden die Kinder des Elements angeordnet).

Der äußere Typ ist entweder block (Element nimmt eine ganze Zeile ein) oder inline (Element fließt im Text mit). Der innere Typ bestimmt den Formatierungskontext für die Kinder. Bei display: flex ist der äußere Typ block und der innere Typ flex.

Die meisten HTML-Elemente sind standardmäßig entweder block (z.B. <div>, <p>, <h1>) oder inline (z.B. <span>, <a>, <strong>). Diese Standardwerte kannst du jederzeit mit display überschreiben.

Syntax & Werte

8 Werte

Wert	Beschreibung	Beispiel
Klassische Werte 4
`block`	Element nimmt die volle verfügbare Breite ein und erzeugt einen Zeilenumbruch davor und danach.	display: block
`inline`	Element fließt im Textfluss mit. Width und Height haben keine Wirkung.	display: inline
`inline-block`	Fließt wie inline im Text, akzeptiert aber width, height und vertikales Padding/Margin.	display: inline-block
`none`	Element wird komplett entfernt. Es nimmt keinen Platz ein und ist nicht zugänglich.	display: none
Neuere Werte 2
`contents`	Die Box des Elements verschwindet, die Kinder verhalten sich als wären sie direkte Kinder des Elternelements.	display: contents
`flow-root`	Erzeugt ein Block-Element mit neuem Block Formatting Context. Moderner Ersatz für den clearfix-Hack.	display: flow-root
Eigene Artikel 2
`flex`	Block-Element mit Flexbox-Layout für die Kinder. Siehe eigenen Artikel.	display: flex
`grid`	Block-Element mit Grid-Layout für die Kinder. Siehe eigenen Artikel.	display: grid

Beispiele

4 Beispiele

Block, Inline und Inline-Block

/* Nimmt die ganze Zeile ein */
.block { display: block; }

/* Fließt im Text mit, keine Breite/Höhe möglich */
.inline { display: inline; }

/* Fließt im Text, akzeptiert aber Breite/Höhe */
.inline-block {
  display: inline-block;
  width: 140px;
}

<div class="demo">
<div class="demo-block">Block 1</div>
<div class="demo-block">Block 2</div>
<p style="margin:8px 0 4px;">Hier ist <span class="demo-inline">Inline 1</span> und <span class="demo-inline">Inline 2</span> im Textfluss.</p>
<div>
  <span class="demo-inline-block">Inline-Block 1</span>
  <span class="demo-inline-block">Inline-Block 2</span>
</div>
</div>

Ein klassisches Muster: Listen-Elemente nebeneinander anordnen ohne Flexbox.

Navigation mit inline-block

.nav-list li {
  display: inline-block;
}

.nav-list a {
  display: inline-block;
  padding: 8px 16px;
  background: #1a56db;
  color: white;
  border-radius: 4px;
}

<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Docs</a></li>
<li><a href="#">Kontakt</a></li>
</ul>

Der wichtigste Unterschied: display: none entfernt das Element komplett aus dem Layout, visibility: hidden versteckt es, aber der Platz bleibt erhalten.

display: none vs. visibility: hidden

/* Element wird komplett entfernt */
.hidden-display {
  display: none;
  /* Kein Platz, nicht im Layout */
}

/* Element ist unsichtbar, Platz bleibt */
.hidden-visibility {
  visibility: hidden;
  /* Platz bleibt erhalten */
}

<div class="compare">
<div class="compare-row">
  <div class="compare-box">
    <strong>display: none</strong>
    <div class="item">Element 1</div>
    <div class="item item-hidden-display">Element 2 (verschwunden)</div>
    <div class="item">Element 3</div>
  </div>
  <div class="compare-box">
    <strong>visibility: hidden</strong>
    <div class="item">Element 1</div>
    <div class="item item-hidden-visibility">Element 2 (unsichtbar)</div>
    <div class="item">Element 3</div>
  </div>
</div>
</div>

display: flow-root erzeugt einen neuen Block Formatting Context. Das ist der moderne Weg, um Floats einzuschließen, ohne einen clearfix-Hack zu benötigen.

flow-root für Float-Einschluss

/* Problem: Float ragt aus dem Container */
.no-flow-root {
  border: 2px solid #dc2626;
}

/* Lösung: Neuer Formatting Context */
.with-flow-root {
  display: flow-root;
  border: 2px solid #059669;
}

<div class="demo-text">
<div class="no-flow-root">
  <div class="floated">Float</div>
  <span>Ohne flow-root: Der Container umschließt das Float-Element nicht.</span>
</div>
<div class="with-flow-root">
  <div class="floated">Float</div>
  <span>Mit flow-root: Der Container umschließt das Float-Element korrekt.</span>
</div>
</div>

Barrierefreiheit

display: none entfernt Elemente aus dem Accessibility Tree. Screenreader können nicht darauf zugreifen, Tastatur-Navigation überspringt sie, und assistive Technologien behandeln sie als nicht existent. Das ist für viele Anwendungsfälle korrekt (z.B. Mobile-Menüs, die auf Desktop versteckt sind), aber problematisch, wenn Inhalte nur visuell versteckt werden sollen.

Für visually-hidden Content (z.B. “Zum Inhalt springen”-Links oder zusätzliche Kontextinformationen für Screenreader) verwende stattdessen das sr-only Pattern:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

display: contents zerstört die Box-Semantik und kann die Barrierefreiheit erheblich beeinträchtigen. Bei semantischen Elementen wie <button>, <table>, <fieldset> oder Listen geht die Rolle im Accessibility Tree verloren. Ein Button mit display: contents ist für Screenreader möglicherweise kein Button mehr. Teste solche Anwendungen intensiv und verwende contents nur auf neutralen Containern wie <div> oder <span>. Die WCAG 1.3.1 (Info and Relationships) fordert, dass Struktur und Beziehungen programmatisch bestimmbar bleiben.

Häufige Fehler

5 Fehler

01 Width/Height auf Inline-Elemente setzen

Bei display: inline haben width, height und vertikales margin/padding keine Wirkung. Verwende inline-block oder block, wenn du die Dimensionen kontrollieren willst.

02 display: none für Animation verwenden

display: none lässt sich nicht mit CSS-Transitions animieren. Verwende stattdessen opacity und visibility für Ein-/Ausblend-Effekte.

03 display: contents und Accessibility

display: contents kann die Zugänglichkeit beeinträchtigen, weil die Box-Semantik des Elements verloren geht. Bei <button> oder <table> kann das problematisch sein. Verwende es bewusst und teste mit Screenreadern.

04 Leerzeichen bei Inline-Block

Zwischen inline-block Elementen entsteht ein kleiner Abstand durch Whitespace im HTML. Das liegt am gleichen Verhalten wie bei normalen Inline-Elementen. Flexbox vermeidet dieses Problem.

05 display: none blendet alles aus

Wenn ein Elternelement display: none hat, sind auch alle Kinder unsichtbar. Es gibt keinen Weg, ein Kind wieder sichtbar zu machen, solange der Elternteil none ist.

Browser-Kompatibilität

5 von 5

Die klassischen display-Werte (block, inline, inline-block, none) werden von allen Browsern seit Jahrzehnten unterstützt. Neuere Werte wie contents und flow-root sind in allen modernen Browsern verfügbar.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

display in HTML-Emails ist stark eingeschränkt. Vermeide es, den natürlichen Display-Typ von Elementen zu ändern.

Apple Mail

Komplett
Gmail

Teilweise

display: none funktioniert, inline-block teilweise. flex und grid werden ignoriert
Outlook

Teilweise

Nur display: block und display: none. Outlook ignoriert inline-block, flex und grid
Thunderbird

Komplett
Yahoo Mail

Teilweise

Grundlegende Werte werden unterstützt, flex und grid nicht

Steckbrief display

Syntax: display: block | inline | inline-block | none | contents | flow-root | flex | grid | ...
Initialwert: abhängig vom Element (block oder inline)
Vererbt: Nein
Animierbar: Nein

Kategorie: Display & Sichtbarkeit
Werte: 8
Beispiele: 4
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

Inhalt

7 Kapitel

Verwandt

visibility opacity position float & clear

Üben /lernen/css

Im CSS-Kurs gestaltest du echte Seiten selbst und prüfst jede Aufgabe direkt im Browser.

Zum CSS-Kurs

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da