Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Block-Level-Inhalt

In CSS wird Inhalt, der an einem Blocklayout teilnimmt, als Block-Level-Inhalt bezeichnet.

In einem Blocklayout werden Boxen hintereinander 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 einen vertikalen Raum, der der Höhe seines Inhalts entspricht, wodurch ein "Block" entsteht.

Hinweis: Das oben beschriebene Verhalten des Blocklayouts ä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 als entweder "Block-Level"-Elemente oder "Inline"-Elemente kategorisiert. Diese präsentationstechnische Eigenschaft wird nun durch CSS spezifiziert.

Beispiele

In diesem Beispiel werden zwei Paragraph (<p>) Elemente in ein <div> gestellt.

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 Paragraph (<p>) Elemente sind standardmäßig Block-Level-Elemente. Deshalb werden sie im Blocklayout angezeigt:

Siehe auch