11. ALLGEMEINES ZUM BOX-MODELL

Um die Einstellung der Innenabstände, Rahmen und Aussenabstände von HTML-Elementen besser zu verstehen, kann man sich vier ineinanderliegende rechteckige Boxen vorstellen. So bildet beispielsweise ein Bild die erste Box, um die herum sich der Innenabstand (padding) befindet. Der Innenabstand (padding) ist wiederum von einem Rahmen (border) umgeben, um den herum sich schliesslich der Aussenabstand (margin) erstreckt.

Boxmodell zur Veranschaulichung von padding und margin

Die Eigenschaften des umliegenden Raumes eines HTML-Elements werden anhand des Box-Modells festgelegt. Es besteht aus: Element, padding (Innenabstand), Border (Rahmen) und margin (Aussenabstand).

Kurzschriften für margin, padding, border-width

Wenn Sie keine Seite explizit angeben, gilt der angegebene Wert für alle vier Seiten gleichermassen.

 
				img {
				width: 300px;
				padding: 35px;
				margin: 80px;
				}
				

Es ist empfehlenswert, die Werte für margin, padding und border-width in Kurzschrift anzugeben. Folgen Sie dann dem Uhrzeigersinn, beginnend bei top.

Kurzschreibweise in CSS für top, right, bottom, left