Block und Inline

Bis hierher hast du Elemente nach ihrer Bedeutung ausgewählt. Es gibt eine zweite Eigenschaft, die jedes Element mitbringt und die bestimmt, wie es sich im Fluss der Seite verhält.

01 / 03Inline: mitten im Text

<p>
  Das <span>erste</span> und das <span>zweite</span> Wort stehen in derselben Zeile.
  Ein <a href="/rezepte">Link</a> und ein <strong>wichtiges Wort</strong> genauso.
</p>

Inline-Elemente sind nur so breit wie ihr Inhalt und fließen im Text mit. Mehrere davon stehen nebeneinander in derselben Zeile, bis die Zeile voll ist und der Text von allein umbricht.

Dazu gehören alle Elemente, die du im Text einsetzt: span, a, strong, em, code, abbr, img. Sie unterbrechen den Lesefluss nicht.

Ein Sonderling in dieser Liste ist das img: Es fließt mit wie ein Wort, ist aber kein Text, sondern ein Bild mit eigener Größe. Für die Frage „eigene Zeile oder mitfließen” zählt es zu den Inline-Elementen, und mehr brauchst du hier nicht. Im CSS-Kurs wirst du sehen, dass es sich in ein paar Punkten anders verhält als ein span.

02 / 03Block: eine eigene Zeile

<div>Erste Kiste</div>
<div>Zweite Kiste</div>

<p>Ein Absatz</p>
<h2>Eine Überschrift</h2>

Block-Elemente nehmen die volle verfügbare Breite und beginnen immer auf einer neuen Zeile. Auch wenn im Code beide div direkt nebeneinander stehen, stehen sie auf der Seite untereinander.

Dazu gehören alle Elemente, die einen Bereich aufmachen: div, p, h1 bis h6, ul, ol, section, article, header, main, footer.

Ein Sonderfall ist das li. Es beansprucht wie ein Block eine eigene Zeile, hat aber eine eigene Voreinstellung, damit der Browser den Punkt oder die Zahl davorsetzen kann. Für die Frage „eigene Zeile oder mitfließen“ zählt es zu den Blöcken.

Und noch einmal der Hinweis, der in diesem Kurs immer wieder auftaucht: Das ist die Voreinstellung des Browsers, keine feste Eigenschaft. Mit CSS lässt sich jedes Element umstellen. Eine Navigation aus li steht auf fast jeder Seite waagerecht nebeneinander, obwohl ein li von Haus aus eine eigene Zeile bekommt. Für dieses Verhalten ist CSS zuständig, nicht das Element.

Auf einem breiten Bildschirm kannst du den Unterschied ablesen, statt ihn zu glauben. Schalt den Inspector ein, das Fadenkreuz in der Browser-Leiste, und zeig im ersten Beispiel auf das Wort „erste“. Im Auskunftsstreifen steht display: inline, und die Breite daneben ist die des Wortes, mehr nicht. Zeig dann im zweiten Beispiel auf „Erste Kiste“: display: block, und die Breite ist die volle. Diese beiden Werte sind der ganze Unterschied, um den es in dieser Lektion geht.

Schalt das Fadenkreuz danach wieder aus. Solange es an ist, fängt es jeden Klick in der Seite ab, und Knöpfe, Links und Aufklappbares reagieren nicht mehr.

03 / 03Die Regel, die daraus folgt

Aus dem Unterschied ergibt sich eine Verschachtelungsregel: Ein Block-Element darf nicht in ein Inline-Element. Ein span kann keinen div enthalten, ein strong keinen p.

Dazu kommt eine zweite Regel, die man leicht mit der ersten verwechselt: Manche Block-Elemente nehmen selbst nur Text und Inline-Elemente auf. Das wichtigste davon ist p. Ein div in einem p verstößt also nicht gegen die Regel von oben, beide sind ja Blöcke, sondern gegen diese hier.

Und genau das ist der bekannteste Fall:

<p>
  Ein Absatz mit einer Kiste darin:
  <div>Ich bin ein Block</div>
  und hier sollte der Absatz weitergehen.
</p>

Schau dir das Ergebnis an. Der Browser stellt fest, dass ein div in einem p nicht sein kann, schließt den Absatz vorzeitig, setzt das div daneben und öffnet danach einen neuen Absatz. Der neue ist wirklich leer: Dein zweiter Satz steht danach in gar keinem Element mehr, sondern lose im body. Was du geschrieben hast und was im DOM steht, ist nicht dasselbe.

Und das ist der Kern: Der Browser meldet keinen Fehler, er repariert still. Deshalb sieht die Seite manchmal fast richtig aus und benimmt sich trotzdem seltsam, sobald CSS oder JavaScript dazukommen.

Nachsehen kannst du es mit dem Inspector: Zeig auf den Satz „und hier sollte der Absatz weitergehen“. Im Auskunftsstreifen steht body. Kein p, kein div, nichts dazwischen. Der Satz hängt wirklich lose im Rumpf der Seite, genau wie oben beschrieben.

Eine Ausnahme lohnt sich zu merken: a darf seit HTML5 auch Blöcke umschließen. Ein Link um eine ganze Produktkarte ist erlaubt und praktisch. Für alle anderen Inline-Elemente gilt die Regel weiter.

Wenn du unsicher bist, hilft eine einfache Frage: Ist das, was ich einpacke, ein eigener Bereich oder nur ein Stück Text? Ein Bereich gehört in ein Block-Element, ein Stück Text in ein Inline-Element. Damit liegst du in den allermeisten Fällen richtig, ohne eine Liste auswendig zu lernen.