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

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:

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

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>

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.

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

Block in Block ist erlaubt:

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

Inline in Inline ist erlaubt:

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

Inline in Block ist erlaubt:

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

Block in Inline ist 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>

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.