Block-level content

Im CSS wird Inhalt, der am Block-Layout beteiligt ist, als Block-Level-Inhalt bezeichnet.

In einem Block-Layout werden Boxen nacheinander vertikal angeordnet, beginnend am oberen Rand eines umschließenden Blocks. Die linke Außenkante jeder Box berührt die linke Kante des umschließenden Blocks.
Ein Block-Level-Element beginnt immer in einer neuen Zeile. In horizontalen Schreibrichtungen, wie Englisch oder Arabisch, nimmt es den gesamten horizontalen Raum seines Elternelements (Containers) ein und den vertikalen Raum, der der Höhe seiner Inhalte entspricht, wodurch ein "Block" entsteht.

Hinweis: Das oben beschriebene Verhalten des Block-Layouts ändert sich, wenn der writing-mode des umschließenden Blocks auf einen anderen Wert als den Standardwert gesetzt wird.

Hinweis: HTML (HyperText Markup Language) Elemente wurden historisch entweder als "Block-Level"-Elemente oder "Inline"-Elemente kategorisiert. Als Präsentationseigenschaft wird dies jetzt durch CSS spezifiziert.

Beispiele

In diesem Beispiel werden zwei Absatz-(<p>) Elemente in ein <div> eingefügt.

html
<div>
  <p>
    This the first paragraph. The background color of these paragraphs have been
    colored to distinguish them from their parent element.
  </p>
  <p>This is the second paragraph.</p>
</div>

Die Absatz(<p>)-Elemente sind standardmäßig Block-Level. Deshalb werden sie im Block-Layout angezeigt:

Siehe auch