CSS-Quiz · Runde 1
CSS-Quiz: Box-Modell – Teil 1
10 Fragen zu Box-Modell in CSS 2.1. Jede Antwort wird sofort bewertet und erklärt; das Ergebnis erscheint am Ende der Seite.
Die vier Schichten und die Reihenfolge der Werte
Jedes Element erzeugt eine rechteckige Box aus vier Schichten, die von innen nach außen liegen: Inhalt, Innenabstand, Rahmen, Außenabstand. Die drei äußeren gibt es für jede der vier Seiten einzeln, und jede von ihnen hat eine eigene Längsform – zwölf Eigenschaften also allein für Abstände und Rahmenbreiten, dazu Stil und Farbe des Rahmens.
Damit man nicht zwölf Zeilen schreiben muss, gibt es die Kurzformen, und sie folgen alle derselben Regel: Bei vier Werten gilt die Reihenfolge oben, rechts, unten, links – im Uhrzeigersinn ab oben. Bei drei Werten gilt der zweite für rechts und links, bei zwei der erste für oben und unten und der zweite für die Seiten, bei einem für alle vier. Die fehlenden Werte werden also von der gegenüberliegenden Seite übernommen.
Dieselbe Systematik gilt für den Eckenradius, dort allerdings mit den Ecken statt den Seiten und ebenfalls ab oben links im Uhrzeigersinn. Wer die Regel einmal verinnerlicht hat, muss sie bei keiner Kurzform mehr nachschlagen – sie ist in CSS durchgehend gleich.
Wie Breite und Höhe zustande kommen
Der Ausgangswert beider Maßangaben ist auto, und er bedeutet für Breite und Höhe etwas Verschiedenes. Bei einem Block im normalen Fluss ist die Breite der Rest: Was von der Breite des enthaltenden Blocks nach Abzug von Außenabständen, Rahmen und Innenabständen übrig bleibt, wird die Inhaltsbreite. Deshalb ragt ein Block nicht heraus, wenn man ihm Polsterung gibt – er wird innen schmaler.
Die Höhe dagegen ergibt sich aus dem Inhalt: so hoch wie das, was darin steht. Ein Block füllt seinen Container also in der Breite, aber nicht in der Höhe. Daraus folgt der bekannteste Stolperstein bei Prozentangaben – eine Höhe in Prozent setzt voraus, dass der enthaltende Block eine bestimmte Höhe hat; hat er sie nicht, wird die Angabe zu auto.
Bei umflossenen, absolut positionierten und als Inline-Block dargestellten Elementen gilt die Rest-Regel nicht: Dort schrumpft die Box auf ihren Inhalt. Eine fehlende Breitenangabe bedeutet damit je nach Zusammenhang zwei völlig verschiedene Dinge, und das erklärt eine Reihe von Beobachtungen, die sonst willkürlich wirken.
Wo der Hintergrund einer Box endet
Der Hintergrund einer Box – Farbe wie Bild – wird unter Inhalt, Innenabstand und Rahmen gemalt, und zwar bis zur Außenkante des Rahmens. Der Außenabstand ist immer durchsichtig; dort scheint der Hintergrund des Elternelements durch. Eine Hintergrundfarbe für den Außenabstand gibt es deshalb nicht und kann es nicht geben.
Dass der Hintergrund unter den Rahmen reicht, wird erst bei einem gestrichelten oder gepunkteten Rahmen sichtbar: In den Lücken erscheint nicht der Hintergrund des Elternelements, sondern der eigene. Wer einen gestrichelten Rahmen über einer dunklen Box zeichnet, sieht dunkle Lücken statt heller – kein Fehler, sondern die Festlegung von CSS 2.1.
Spätere Module haben das steuerbar gemacht: Eine Eigenschaft bestimmt, bis zu welcher Kante die Fläche gemalt wird, eine zweite, an welcher Kante die Positionierung eines Bildes ansetzt. Beide sind heute Bestandteile der Kurzform und werden von ihr zurückgesetzt – ein Grund, die Kurzform als vollständige Neudefinition zu behandeln und nicht als Ergänzung.
Wie viele Kurzformen das Box-Modell kennt
Im Box-Modell von CSS 2.1 gibt es sechs Kurzformen. Zwei davon fassen jeweils vier Seiten zusammen – Außenabstand und Innenabstand. Drei fassen jeweils eine Rahmeneigenschaft über alle vier Seiten zusammen: Breite, Stil und Farbe. Und eine fasst alles zusammen, was einen Rahmen ausmacht, allerdings nur für alle vier Seiten gemeinsam.
Dazu kommen vier Kurzformen für die einzelnen Seiten des Rahmens, die jeweils Breite, Stil und Farbe einer Seite setzen. Sie werden gern übersehen, sind aber die praktischste Form, wenn nur eine Kante eine Linie tragen soll – eine Zeile statt dreier.
Für alle gilt dieselbe Regel: Was in einer Kurzform nicht genannt ist, wird auf den Ausgangswert zurückgesetzt und nicht etwa beibehalten. Wer eine Rahmenfarbe setzt und danach die allgemeine Rahmen-Kurzform notiert, verliert sie. Diese Eigenheit ist keine Falle des Box-Modells, sondern gilt in CSS durchgehend – bei der Schrift, beim Hintergrund und bei den Listen genauso.
Zum Nachrechnen: Der Box-Modell-Visualizer zeigt die vier Schichten einzeln und rechnet die Außenbreite an jedem Regler mit – einschließlich der umgeschalteten Zählweise, die diese Runde noch nicht behandelt.