Das Box-Modell

Aus CSS-Sicht sind alle HTML-Elemente rechteckige „Boxen“ mit Rändern und Abständen nach außen und innen. Dieses Konzept wird in CSS „Box-Modell“ (box model) genannt.

Rand

Verschiedene CSS-Eigenschaften für den Rand:

• border-width bestimmt die Dicke des Randes (Angabe in Pixeln)
• border-style steht für die Art des Randes (durchgehende Linie, gestrichelt, usw.)
• border-color legt die Farbe des Randes fest
• border-radius wird für runde Ecken genutzt

Die folgenden Eigenschaften ergeben einen schwarzen, gestrichelten Rand, der 3 Pixel dick ist:

border-width: 3px;
border-style: dashed;
border-color: black;

was wiederum so zusammengefasst werden kann (mit dem gleichen Ergebnis):

border: 3px dashed black;

Abstände

Bei einer Box gibt es den Außenabstand (margin) und den Innenabstand (padding) — siehe Abbildung am Anfang. Zu beiden Eigenschaften werden meistens Werte in Pixeln angegeben. margin und padding betreffen gleichermaßen alle vier Seiten der Box.

Sowohl für margin (Abstand außerhalb der Box) also auch für padding (Abstand des Inhalts einer Box zum Rand der Box) können mit padding-top/-bottom/-left/-right bzw. margin-top/-bottom/-left/-right die Abstände an einzelnen Seiten festgelegt werden.

Hinweis zum vertikalen Abstand

Angenommen es gibt zwei Boxen, die direkt untereinander dargestellt werden. Wenn die obere Box einen unteren Außenabstand mit margin-bottom definiert und die untere Box mit margin-top einen äußeren Abstand nach oben hat, dann werden diese beiden vertikalen Abstände nicht addiert, sondern nur der größere der beiden Abstände wirkt sich aus.

Angenommen, wir haben zwei div-Elemente, die jeweils ein farbiges Quadrat darstellen sollen:

HTML

<div id="red" class="square margins"></div>
<div id="blue" class="square margins"></div>

CSS

#red { background-color: red; }
#blue { background-color: blue; }
.square{
  width: 100px;
  height: 100px;
}

Dann bewirkt die folgende CSS-Regel für beide Quadrate einen Außenabstand von 50 Pixeln nach oben und 80 Pixel nach unten. Zwischen den beiden Boxen ist nur ein Abstand von 80 Pixeln zu sehen und nicht 130 Pixel, was die Summe der beiden Deklarationen margin-top und margin-bottom wäre (der größere Abstand wirkt sich aus).

.margins {
  margin-top: 50px;
  margin-bottom: 80px;
}

DevTools im Browser

Jeder Browser hat eingebaute Werkzeuge für Entwickler (web developer tools). Diese werden durch ein Menü im Browser oder Tastenbefehl aktiviert (z.B. F12 in den meisten Browsern).

Hiermit kann (neben vielen anderen Dingen) das Box-Modell eines HTML-Fragments visuell nachvollzogen werden. Dazu werden einzelne Elemente inspiziert (inspect element), sodass Abstände und Ränder sichtbar werden.

➔ Kurze Vorführung der DevTools in Firefox und/oder Chrome

Weiterentwicklung der Beispiel-App