display

Zuletzt aktualisiert am 15. Februar 2026

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.

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

Beispiele

Block vs. Inline vs. 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>

Inline-Block für Navigation

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

.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>

display: none vs. visibility: hidden

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

/* 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>

flow-root als Clearfix-Ersatz

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.

/* 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

• 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.
• 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.
• 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.
• 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.
• 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

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.

Email-Kompatibilität

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

Verwandte Eigenschaften