Ausführbare CSS-Docs: CSS Display

Q: Was ist der Unterschied zwischen block, inline und inline-block?

Ein block-Element beginnt in einer neuen Zeile und füllt die verfügbare Breite. Ein inline-Element fließt im Text mit und ignoriert width, height und vertikale Margins. inline-block fließt wie inline im Text mit, akzeptiert aber Breite, Höhe, Padding und Margins wie ein Block.

Q: Was ist der Unterschied zwischen display: none und visibility: hidden?

display: none entfernt das Element und seinen Platz. visibility: hidden macht es unsichtbar, behält aber seinen Platz im Layout, sodass sich nichts verschiebt.

Q: Ist ein div standardmäßig block oder inline?

Block. div, p, Überschriften, ul, section und form sind standardmäßig block; span, a, strong, em, img, input und button sind inline oder inline-block.

Was display macht

Jedes Element hat einen display-Wert, der entscheidet, wie es angeordnet wird. Die drei, denen du zuerst begegnest, sind block, inline und inline-block. Hier sind drei identische Boxen, mit gleicher width, height, gleichem padding und margin, nur display ist verschieden:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

	`block`	`inline`	`inline-block`
Beginnt in neuer Zeile	Ja	Nein	Nein
Breite standardmäßig	Füllt den Container	Passt sich dem Inhalt an	Passt sich dem Inhalt an
`width` und `height`	Gelten	Ignoriert	Gelten
Vertikales Margin	Gilt	Ignoriert	Gilt
Vertikales Padding	Schiebt Inhalt	Gemalt, schiebt Zeilen aber nicht auseinander	Schiebt Inhalt
Typische Elemente	`div`, `p`, `h1`, `ul`, `section`	`span`, `a`, `strong`, `em`	`button`, `input`, `img` (ersetzte Elemente verhalten sich so)

In der Vorschau steht die Block-Box in einer eigenen Zeile und ist 120px breit. Die Inline-Box ignoriert Breite und Höhe und umschließt nur ihr Wort, und ihr vertikales Padding und ihr Rahmen ragen über und unter die Zeile hinaus, ohne die Zeile höher zu machen. Die inline-block-Box bleibt in der Textzeile, behält aber ihre volle Größe.

display: block

Ein Block-Element nimmt die ganze verfügbare Breite ein und schiebt alles, was folgt, in eine neue Zeile. Wenn du einen Link zu einem Block machst, wird eine ganze Zeile klickbar:

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

Die Breite eines Blocks lässt sich setzen, und sobald er eine hat, zentriert ihn margin: 0 auto, wie die Seite div zentrieren zeigt.

display: inline-block

inline-block ist der Mittelweg: Es fließt wie ein Wort in der Zeile, aber du kannst ihm eine Größe geben. Das ist praktisch für Badges, Buttons und Icons im Text:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

Mehrere inline-block-Boxen in einer Reihe bekommen durch den Leerraum im HTML eine kleine Lücke dazwischen. Für Reihen von Boxen ist display: flex am Elternelement das bessere Werkzeug.

display: none vs. visibility: hidden

Beides macht ein Element unsichtbar. Der Unterschied ist, ob es seinen Platz behält:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

	`display: none`	`visibility: hidden`	`opacity: 0`
Nimmt Platz ein	Nein	Ja	Ja
Anklickbar	Nein	Nein	Ja
Von Screenreadern gelesen	Nein	Nein	Ja
Lässt sich weich animieren	Nein	Nein	Ja

Das HTML-Attribut hidden bewirkt über das Stylesheet des Browsers dasselbe wie display: none. Das heißt, jede CSS-Regel, die display am Element setzt (zum Beispiel .card { display: flex; }), überschreibt es, und das Element ist wieder sichtbar. Füge [hidden] { display: none !important; } hinzu, wenn dich das trifft.

Um etwas optisch auszublenden, es aber für Screenreader zu behalten (etwa ein Label für einen Icon-Button), nimm statt display: none eine Klasse für „visuell verborgen“.

display: flex und display: grid

Diese beiden machen ein Element zu einem Layout-Container für seine Kinder:

display: flex ordnet Kinder in einer Zeile oder Spalte an, mit Kontrolle über Ausrichtung und Abstände. Siehe Flexbox.
display: grid platziert Kinder gleichzeitig in Zeilen und Spalten.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

Der Container selbst bleibt ein Block. inline-flex und inline-grid machen dasselbe für die Kinder, lassen den Container aber inline fließen, wie inline-block.

Die anderen Werte

Wert	Was er macht
`flow-root`	Ein Block, der seine Floats einschließt und verhindert, dass Margins von Kindern herausrutschen; der moderne „Clearfix“
`contents`	Die eigene Box des Elements verschwindet, und seine Kinder verhalten sich wie Kinder seines Elternelements. Vermeide es an Buttons, Listen und Tabellen: Manche Browser verlieren dabei die Bedeutung des Elements für Screenreader
`list-item`	Ein Block mit Listenmarkierung, der Standard für `li`
`table`, `table-row`, `table-cell`	Tabellenlayout für Elemente, die keine Tabellen sind
`inline-flex`, `inline-grid`	Ein Flex- oder Grid-Container, der inline steht

Häufige Fehler

width oder height an einem span oder a setzen. Inline-Elemente ignorieren sie. Nimm inline-block oder block.
Vertikales Margin an einem Inline-Element. Wird ebenfalls ignoriert. Gleiche Lösung.
display: none nutzen, um Text für Screenreader zu verstecken. Es versteckt ihn auch vor ihnen.
Erwarten, dass ein Kind in einem Elternelement mit display: none erscheint. In einem ausgeblendeten Elternelement wird nichts dargestellt.
Eine display-Regel überschreibt das Attribut hidden. Die CSS-Regel gewinnt.
Versuchen, display zu animieren. display: none blendet das Element sofort aus, ohne Übergang; animiere opacity und schalte display (oder visibility) am Ende um.

Häufig gestellte Fragen

Was ist der Unterschied zwischen block, inline und inline-block?

Ein block-Element beginnt in einer neuen Zeile und füllt die verfügbare Breite. Ein inline-Element fließt im Text mit und ignoriert width, height und vertikale Margins. inline-block fließt wie inline im Text mit, akzeptiert aber Breite, Höhe, Padding und Margins wie ein Block.

Was macht display: none?

Es entfernt das Element vollständig von der Seite: Es nimmt keinen Platz ein, wird nicht dargestellt und ist für Screenreader verborgen. Seine Kinder sind mit ausgeblendet und lassen sich nicht mit einem eigenen display-Wert anzeigen.

Was ist der Unterschied zwischen display: none und visibility: hidden?

display: none entfernt das Element und seinen Platz. visibility: hidden macht es unsichtbar, behält aber seinen Platz im Layout, sodass sich nichts verschiebt.

Ist ein div standardmäßig block oder inline?

Block. div, p, Überschriften, ul, section und form sind standardmäßig block; span, a, strong, em, img, input und button sind inline oder inline-block.

Warum haben inline-block-Elemente eine Lücke dazwischen?

Der Leerraum zwischen den Tags im HTML wird als Leerzeichen dargestellt, genau wie zwischen Wörtern. Nimm stattdessen display: flex mit gap am Elternelement oder entferne den Leerraum.

Verwandte Konzepte