Block- vs. Inline-Elemente

Zuletzt aktualisiert am 3. Februar 2026

HTML-Elemente verhalten sich beim Layout grundsätzlich auf zwei verschiedene Arten: Als Block oder als Inline. Dieses Verhalten bestimmt, wie viel Platz ein Element einnimmt und wie es sich neben anderen Elementen positioniert. Wenn du verstehst, wie das funktioniert, werden dir viele CSS-Layout-Fragen sofort klarer.

Block-Elemente

Ein Block-Element nimmt die gesamte verfügbare Breite ein und beginnt immer auf einer neuen Zeile. Es drückt nachfolgende Elemente nach unten:

<div style="background: #dbeafe;">Erstes Block-Element (div)</div>
<p style="background: #dcfce7;">Zweites Block-Element (p)</p>
<h3 style="background: #fef3c7;">Drittes Block-Element (h3)</h3>

Jedes Element steht auf seiner eigenen Zeile und nimmt die volle Breite ein — egal wie kurz der Inhalt ist.

Typische Block-Elemente:

Inline-Elemente

Ein Inline-Element nimmt nur so viel Platz ein wie sein Inhalt. Es bleibt in der gleichen Zeile und fließt mit dem umgebenden Text mit:

<p>
  Dies ist ein Absatz mit einem <strong>fetten Wort</strong>
  und einem <em>kursiven Wort</em>
  und einem <a href="#">Link</a> darin.
</p>

Alle drei hervorgehobenen Wörter stehen in der gleichen Zeile wie der restliche Text.

Typische Inline-Elemente:

Der entscheidende Unterschied

Das ist der Knackpunkt: Bei Inline-Elementen kannst du width, height und vertikale Margins nicht setzen. Das verwirrt am Anfang häufig.

inline-block — Das Beste aus beiden Welten

Es gibt einen dritten Modus: inline-block. Ein Element mit display: inline-block bleibt in der Zeile (wie inline), akzeptiert aber width, height und vertikale Margins (wie block):

<span style="display: inline-block; width: 120px; height: 40px;">
  Box 1
</span>
<span style="display: inline-block; width: 120px; height: 40px;">
  Box 2
</span>
<span style="display: inline-block; width: 120px; height: 40px;">
  Box 3
</span>

CSS display — Verhalten ändern

Das Standard-Displayverhalten ist nicht in Stein gemeißelt. Mit der CSS-Eigenschaft display kannst du es ändern:

<style>
  .als-block {
    display: block;
  }
</style>

<span class="als-block">Span als Block</span>
<span class="als-block">Noch ein Span als Block</span>

Obwohl <span> normalerweise ein Inline-Element ist, verhält es sich hier wie ein Block-Element, weil wir display: block setzen.

Gängige display-Werte:

flex und grid sind moderne Layout-Methoden, die über das einfache Block/Inline-Modell hinausgehen. In der Praxis wirst du sie ständig verwenden — sie sind aber ein CSS-Thema.

Verschachtelungsregeln

Aus dem Block/Inline-Unterschied ergeben sich wichtige Regeln für die Verschachtelung:

Block in Block — erlaubt:

<div>
  <p>Absatz im div</p>
</div>

Inline in Inline — erlaubt:

<strong><em>Fett und kursiv</em></strong>

Inline in Block — erlaubt:

<p>Text mit <strong>fettem Wort</strong></p>

Block in Inline — nicht erlaubt:

<!-- Falsch! -->
<span>
  <p>Absatz in einem span</p>
</span>

Es gibt eine Ausnahme: Das <a>-Element darf in HTML5 Block-Elemente enthalten, damit du z.B. eine ganze Karte klickbar machen kannst:

<!-- Erlaubt seit HTML5 -->
<a href="/artikel">
  <article>
    <h2>Artikel-Titel</h2>
    <p>Beschreibung...</p>
  </article>
</a>

Häufige Fehler

• width/height bei Inline-Elementen: <span style="width: 200px"> hat keinen Effekt. Du brauchst display: inline-block oder display: block.
• <div> in <p>: Ein Block-Element innerhalb eines Absatzes ist ungültig. Der Browser wird das <p> vorzeitig schließen — das Ergebnis ist wahrscheinlich nicht das, was du erwartest.
• Vertikaler Abstand bei Inline: margin-top und margin-bottom bei Inline-Elementen werden ignoriert. Verwende padding (wirkt visuell, aber ohne Layout-Verschiebung) oder wechsle zu inline-block.

Zusammenfassung

Merke dir: Das Standard-Displayverhalten bestimmt nur den Ausgangspunkt. Mit CSS display kannst du jederzeit wechseln.

Im nächsten Artikel geht es um Barrierefreiheit — wie du HTML so schreibst, dass alle Menschen deine Seite nutzen können.