Block-Elemente nehmen die volle verfügbare Breite ein und beginnen eine neue Zeile. Die Einteilung beschreibt, wie der Browser ein Element ohne eigene Anweisung darstellt.
- Block-Element
Element, das ohne weitere Angaben die volle verfügbare Breite einnimmt und in einer neuen Zeile beginnt.
Beispiel: „Ein Block-Element stapelt sich mit seinen Geschwistern untereinander.“
Welche das sind
Absatz, Überschriften, Listen, Tabellen, die Struktur-Elemente wie main und section, dazu der allgemeine Behälter div. Sie bilden das Gerüst einer Seite von oben nach unten.
Für sie lassen sich Breite, Höhe und Abstände in alle Richtungen setzen. Bei Inline-Elementen gilt das nur eingeschränkt, und das ist die praktisch wichtigste Folge der Einteilung.
Die Einteilung ist nur die Voreinstellung
Block und Inline beschreiben, wie der Browser ein Element ohne Anweisung darstellt. Mit der CSS-Eigenschaft für die Darstellungsart lässt sich jedes Element umstellen: Ein Listeneintrag wird nebeneinander dargestellt, ein Link zum Block.
Die Bedeutung des Elements ändert sich dadurch nicht. Ein zum Block gemachter Link bleibt ein Link, und ein als Inline dargestellter Absatz bleibt ein Absatz.
Was ineinander darf
Block-Elemente dürfen andere Block-Elemente enthalten, Absätze allerdings nicht: In einem Absatz steht nur Text und Inline-Inhalt. Wer dort eine Liste einfügt, bekommt vom Browser eine stillschweigende Korrektur, die das Ergebnis verändert.