Jedes HTML-Element wird im Browser in einer Box, also in einer rechteckigen Fläche dargestellt.
Das Boxenmodell unterteilt ein Dokument in verschachtelte und neben-/untereinander angeordnete Boxen. Die Boxen sind für den Leser nicht immer sichtbar – bilden jedoch immer die Grundlage für das Seitenlayout.
Das Boxenmodell unterscheidet in HTML zwei Typen von Elementen, die Block-Elemente sowie die Inline-Elemente.
In dem Beispiel sind in der Browser-Anzeige die Boxen eingezeichnet: Der
Body, alle Überschriften, Listen, Listenelemente und Absätze sind
Blockboxen, das em-Element ist eine Inline-Box.
Die Boxen sind ineinander verschachtelt: Das Body-Element (schwarze Box)
enthält alle Boxen seiner direkten Kinder
(blaue Boxen der Elemente h1, ul
und p). Jedes Listenelement bildet ebenfalls eine Box (grüne
Boxen, enthalten in der blauen ul-Box). Alle Boxen sind so
breit wie ihre
übergeordnete Box (bis auf einen kleinen Rand, der hier zur besseren
Übersichtlichkeit dargestellt wird).
Auch das Inline-Element em wird in einer Box dargestellt (rote
Box), allerdings ist diese Box nur so breit wie ihr Inhalt.
See the Pen HTML-Boxen-Layout by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.
Zu den Block-Elementen gehören alle Elemente, welche die gesamte zur Verfügung stehende Breite für sich beanspruchen. Die Box eines Blockelementes ist somit immer genauso breit wie das jeweils übergeordnete Element (z.B. das Browser-Fenster). Vor und nach einem Block-Element befindet sich immer ein Zeilensprung.
Sind Block-Elemente ineinander verschachtelt, so richtet sich die Breite des Kind-Elementes nach dem Eltern-Element: standardmäßig ist das Kind genauso breit, dass es die maximale Breite hat und vollständig ins Eltern-Element passt.
See the Pen HTML – Boxen-Block by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.
See the Pen HTML – Boxen-Verschachtelt by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.
Bisher wurden bereits folgende Block-Elemente eingeführt:
<h1>
, …, <h6><p><ol>, <ul>, <dl>,
<li>, <dd>,
<dt>
<div>
Inline-Elemente sind Elemente, die in derselben Zeile stehen wie ihre Vorgänger und Nachfolger. Die Box eines Inline-Elementes ist immer genauso breit und genauso hoch wie der Inhalt des Elements. Weder vor noch nach einem Inline-Element steht ein Zeilensprung.
See the Pen HTML – Boxen-Inline by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.
Bisher wurden bereits folgende Inline-Elemente eingeführt:
<img>
<em>,
<strong>, <mark>
<a>Die Einteilung der HTML-Elemente in die beiden Kategorien, Block- und Inline-Elemente, wird vom Browser für das Aufbauen einer Web-Seite benötigt: Der Browser berechnet bei der Darstellung einer Seite zunächst die Größe und die Lage der Boxen, bevor er diese mit Inhalten füllt. Die Berechnung folgt den Regeln:
<p>,
<h1>, …)
beanspruchen
die
gesamte Fensterbreite und
werden daher untereinander angeordnet. Ihre Höhe ist genau
so groß, dass der gesamte Inhalt in die Box passt.