CSS Box-Modell bei Inline-Elementen

Wenn man auf Websites ein Inline-Element einfügt, dann nimmt es einen Platz wie bei einem Block-Element in Form eines Rechtecks ein, das auch Box genannt wird. Es ist zwar unüblich, Inline-Elementen Innenabstände (padding), Rahmen (border) oder Außenabstände (margin) zuzuweisen, es ist jedoch möglich. Das unter CSS Box-Modell beschriebene Verhalten gilt auch für Inline-Elemente. Allerdings verhalten sich padding, border und margin etwas anders als bei Block-Elementen. Außerdem wird zwischen Inline-Elementen unterschieden, die replaced und non-replaced sind. Mit replaced werden Elemente beschrieben, die ihren Ursprung außerhalb der Datei haben. Das ist z.B. bei Bildern der Fall, die als Datei außerhalb der Website bereitliegen und über den IMG-Tag eingebunden werden. Normale Texte sind dagegen non-replaced, da sie in der Datei platziert werden.

Verhalten bei Inline-Elementen, die non-replaced sind

Fügt man auf eine Website mehrere Inline-Elemente hinzu, werden sie standardmäßig nebeneinander angeordnet und nicht untereinander, wie das bei Block-Elementen der Fall ist. Wird Inline-Elementen, die non-replaced sind, über CSS-Regeln padding, border und margin zugewiesen, so verhalten sie sich wie folgt.

Die Zuweisung von width und height hat bei keine Auswirkung.
Die Eigenschaften padding, border und margin werden rundherum um die Box platziert.
Horizontal nehmen sie den Raum ein. Das Element selbst und die Elemente, die sich rechts daneben befinden, können dadurch weiter nach rechts verschoben werden.
Zwischen zwei Inline-Elementen gibt es keine zusammenfallenden Außenabstände.
Vertikal werden padding, border und margin zwar berücksichtigt. Allerdings sind sie schwebend und können andere Elemente überlagern, die oberhalb oder unterhalb platziert sind.
Benötigt man vertikale Abstände, kann man Inline-Elementen die Eigenschaft line-height zuweisen.
Verschiebt man den rechten Rand des Browserfensters in den Bereich von margin-right, werden automatisch Scrollleisten eingeblendet. Die Zeilenumbrüche verhalten sich bei verkleinertem Browserfenster wie bei üblichen Inline-Elementen.
Die Eigenschaft box-sizing hat bei Inline-Elementen die replaced sind, standardmäßig keine Auswirkung.

Verhalten bei Inline-Elementen, die replaced sind

Fügt man auf eine Website Inline-Elemente hinzu, die replaced sind, werden sie ebenfalls standardmäßig nebeneinander angeordnet. Typischerweise zählen Bilder zu den Inline-Elementen, die replaced sind. Werden diesen Elementen über CSS-Regeln padding, border und margin zugewiesen, verhalten sie sich wie folgt.

Gewöhnlich kann man diesen Elementen über die Attribute width und height eine Größe zuweisen.
Die Eigenschaften padding, border und margin werden rundherum um die Box platziert, Sie nehmen ihren Platz wie bei Block-Elementen außerhalb des Elements ein und vergrößern die Box dadurch.
Die nachfolgenden Elemente verschieben sich dadurch nach rechts bzw. nach unten.
Zwischen zwei Elementen gibt es keine zusammenfallenden Außenabstände.
Verschiebt man den rechten Rand des Browserfensters in den Bereich von margin-right, erfolgt automatisch ein Zeilenumbruch und das Element wird unterhalb des vorherigen Elements platziert.
Das Box-Modell kann über die Eigenschaft box-sizing auf border-box umgestellt werden. Dann gilt die Breite und Höhe bis zur äußeren Kante des Rahmens und beinhalten die Maße für padding und border.

Inline-Elementen das Verhalten von Block-Elementen zuweisen

Manchmal kann es sinnvoll sein, den Inline-Elementen das Verhalten von Block-Elementen zuzuweisen. Das kann z.B. dann notwendig sein, wenn man über width und height eine Größe zuweisen möchte oder wenn die Inline-Elemente untereinander angeordnet werden sollen, wie das bei Block-Elementen standardmäßig der Fall ist und bei responsive Webdesign wichtig sein kann. Hierfür verwendet man die Eigenschaft display mit dem Wert block. Ein Beispielcode.

.selektor {
display: block;
/* Sonstige CSS-Angaben */
}

Durch den Code wird das Inline-Element nicht zu einem Block-Element. Es wird lediglich das Verhalten eines Block-Elements zugewiesen. Die Regel, dass man Block-Elemente nicht in Inline-Elemente einfügen kann, gelten weiterhin.