Das Box-Modell

In dieser Lektion schauen wir uns an, wie viel Platz Elemente auf einer Seite einnehmen und was sie voneinander trennt. Der Grundgedanke ist einfach: Jedes Element einer Seite ist eine rechteckige Box, auch wenn man ihre Ränder nicht sieht.

Wenn du zum Beispiel einer Überschrift eine Hintergrundfarbe gibst, wird die ganze Zeile der Seite eingefärbt, nicht nur die Fläche hinter dem Text. Das liegt daran, dass der Hintergrund die ganze Box des Elements füllt, und die meisten Elemente, etwa Überschriften, Absätze und divs, sind standardmäßig so breit wie das Element, in dem sie stehen (ihr Elternelement). Manche Elemente, etwa strong oder a, sind nur so breit wie ihr Inhalt. Warum das so ist, sehen wir in der Lektion Display und Position.

Die Box jedes Elements hat vier Teile, von innen nach außen:

• Inhalt (content): der Inhalt des Elements selbst, etwa der Text eines Absatzes oder ein Bild.
• Innenabstand (padding): der Platz zwischen dem Inhalt und dem Rahmen.
• Rahmen (border): eine Linie um den Inhalt und den Innenabstand. Er kann auch unsichtbar sein.
• Außenabstand (margin): der Platz außerhalb des Rahmens, der das Element von den Elementen um es herum trennt.

Stell dir ein gerahmtes Bild an einer Wand vor: Der Inhalt ist das Bild selbst, der Innenabstand ist das Passepartout (der Kartonstreifen zwischen Bild und Rahmen), der Rahmen ist der Bilderrahmen, und der Außenabstand ist der Abstand zwischen diesem Rahmen und dem nächsten Bild an der Wand.

In dieser Lektion lernen wir, jeden dieser Teile mit CSS einzustellen. Die Katzenseite hat bereits eine kurze style.css mit den Farben und Schriften, die du aus den vorigen Lektionen kennst. Damit die Boxen sichtbar werden, geben wir vorerst jedem Element einen roten Rahmen. Du wirst sehen, dass die Boxen der Überschriften die ganze Breite einnehmen, obwohl ihr Text kurz ist, während die Box des Elements strong nur so breit ist wie ihr Text.

Tipp: Die Box jedes Elements auf jeder Website (auch in der Vorschau hier) kannst du direkt in deinem Browser ansehen. Klicke mit der rechten Maustaste auf das Element und wähle Untersuchen. Die Entwicklerwerkzeuge öffnen sich, und wenn du dort mit der Maus über ein Element fährst, hebt der Browser auf der Seite seinen Inhalt, Innenabstand, Rahmen und Außenabstand in verschiedenen Farben hervor.