The StyleWorksCSS { Referenz · Labor · Übungen }
  1. Startseite
  2. Testen
  3. Box-Modell 2

CSS-Quiz · Runde 2

CSS-Quiz: Box-Modell – Teil 2

10 Fragen zu Box-Modell in CSS 2.1. Jede Antwort wird sofort bewertet und erklärt; das Ergebnis erscheint am Ende der Seite.

Erstveröffentlichung Fragen 10Antwortmöglichkeiten 3 je Frage
Frage 1 von 10Bei der Positionierung von Block- Level- Elementen gibt es das Prinzip der zusammen fallenden margins. Angenommen, von zwei nebeneinander liegenden Boxes ist für die linke Box margin-right:25px; deklariert und für die rechte Box margin-left:15px;.
Wie groß ist der Abstand zwischen den Rahmen der beiden Elemente?

Lösung

Richtig: 40 Pixel. – Richtig, horizontal nebeneinander liegende … fallen nicht zusammen. Genau genommen tritt dieser Fall aber nur bei floatierten Elementen auf.

Frage 2 von 10Wenn margin für eine Box in Prozent angegeben wird, welches ist dann das Bezugselement?

Lösung

Richtig: Das umschließende Element. – Stimmt, denn die Dimensionen des eingeschlossenen Elements können sich durch … noch ändern.

Frage 3 von 10Welches ist der Ausgangswert für die Eigenschaft padding?

Lösung

Richtig: Ein Ausgangswert ist nicht definiert. – Richtig, weil … eine Kurzschrift- Eigenschaft ist, gibt es dafür keine Ausgangswerte.

Frage 4 von 10Welche Arten von Boxes gibt es?

Lösung

Richtig: Block- Boxes, Inline- Boxes und Anonyme Boxes.

Frage 5 von 10Wie wird der Rahmen um ein Element ausgegeben, wenn seine Eigenschaften nicht im Stylesheet deklariert sind?

Lösung

Richtig: Gar nicht. – Stimmt, der Ausgangswert für … ist …, er bewirkt, dass der Rahmen nicht ausgegeben wird.

Frage 6 von 10Warum erzeugt das Element IMG eine Inline- Box und nicht eine Block- Box?

Lösung

Richtig: Weil die erzeugte Box nur so breit ist wie das Element.

Frage 7 von 10Werden die deklarierten Werte für die Eigenschaften margin, border und padding weitervererbt?

Lösung

Richtig: Nein. – Stimmt, sie müssen für jedes einzelne Element neu deklariert werden.

Frage 8 von 10Angenommen, für ein Element liegen folgende Deklarationen vor:
{ border-style: solid;
  border-top: maroon;
  border-right: medium;
  color: navy; }
Auf welchen Seiten des Elements wird ein dunkelblauer Rahmen ausgegeben?

Lösung

Richtig: Unten und links. – Richtig. Die Eigenschaft … wird zwar zuerst für alle Seiten deklariert, aber durch die Kurzschrift-n Eigenschaften … und … wieder zurückgesetzt.

Frage 9 von 10Ein gültiger Wert für die Rahmenfarbe ist transparent. In welcher Farbe wird nun der Rahmen im folgenden Beispiel gezeichnet?
{ color: transparent;
  border: 1px solid; }

Lösung

Richtig: In der Farbe, die das Benutzerprogramm vorgibt. – Stimmt, … ist ein ungültiger Wert für …, die Deklaration wird deshalb ignoriert. Dann setzt das Anwenderprogramm seinen eigenen Ausgangswert für die Rahmenfarbe ein.

Frage 10 von 10Können die margins eines Elements mit den margins des umfassenden Elements zusammen fallen?

Lösung

Richtig: Ja, in bestimmten Fällen. – Richtig, sie können zusammenfallen, wenn für das umfassende Element weder Rahmen noch … deklariert sind.

Zusammenfallende Abstände in drei Konstellationen

Senkrechte Außenabstände fallen zusammen: Aus zwei Werten wird nicht die Summe, sondern der größere. Waagerechte Abstände addieren sich immer. Der Effekt tritt in drei Konstellationen auf – zwischen benachbarten Geschwistern, zwischen einem Elternelement und seinem ersten oder letzten Kind, und bei einer leeren Box zwischen deren eigenem oberen und unterem Abstand.

Die zweite Konstellation ist die verwirrendste: Ein oberer Abstand am ersten Kind schlägt durch die Oberkante des Elternelements hindurch und schiebt dieses mit nach unten, statt innen Platz zu schaffen. Verhindert wird das durch alles, was zwischen die beiden Kanten tritt – ein Innenabstand, ein Rahmen, oder ein eigener Block-Formatierungskontext am Elternelement.

Aufgehoben ist das Zusammenfallen bei allem, was aus dem normalen Fluss genommen ist: umflossene und absolut positionierte Elemente, Inline-Blöcke, Tabellenzellen, Flex- und Grid-Items. Wer sich auf das Zusammenfallen verlässt, sollte deshalb wissen, in welchem Kontext seine Boxen stehen – und wer eine feste Lücke braucht, nimmt gap oder setzt Abstände konsequent nur in eine Richtung.

Ausgangswerte und Vererbung im Box-Modell

Keine der Box-Eigenschaften wird vererbt – nicht die Abstände, nicht der Rahmen, nicht der Hintergrund, nicht die Maße. Das ist Absicht: Ein vererbter Rahmen würde um jedes Kind herum wiederholt, und ein vererbter Abstand würde sich mit jeder Ebene addieren. Wer den Wert des Elternelements ausdrücklich übernehmen will, hat dafür das Schlüsselwort für die Vererbung.

Die Ausgangswerte sind durchgehend sparsam: null für alle Abstände und Innenabstände, medium für die Rahmenbreite, none für den Rahmenstil, auto für Breite und Höhe, durchsichtig für den Hintergrund. Dass eine Überschrift dennoch Abstand hat und eine Liste eingerückt ist, kommt nicht aus diesen Werten, sondern aus dem Vorgabe-Stylesheet des Browsers – zwei verschiedene Dinge, die regelmäßig verwechselt werden.

Deshalb stellt das Schlüsselwort für den Ausgangswert nicht den gewohnten Zustand wieder her: Der Ausgangswert der Anzeigeart ist inline, auch bei einem Absatz. Wer die Ebene des Browsers zurückholen will, braucht das Schlüsselwort, das die Kaskade eine Stufe zurücknimmt.

Der Rahmen: erst der Stil, dann Breite und Farbe

Ein Rahmen erscheint nur, wenn ein Stil gesetzt ist – der Ausgangswert des Stils ist none, und dann ist die Rahmenbreite rechnerisch null, gleichgültig was als Breite notiert wurde. Das ist die erste Antwort auf die Frage, warum ein Rahmen mit gesetzter Breite und Farbe unsichtbar bleibt.

Der Ausgangswert der Rahmenfarbe ist die Vordergrundfarbe des Elements. Ein Rahmen ohne Farbangabe hat also die Textfarbe – ein bequemer Umstand, den das später hinzugekommene Schlüsselwort für die aktuelle Farbe auch anderswo verfügbar macht. Der Wert für Durchsichtigkeit erzeugt dagegen einen Rahmen, der Platz belegt und nichts zeigt: nützlich, um Raum zu reservieren, der im ausgewählten Zustand nur die Farbe wechselt, damit das Layout nicht springt.

Von den acht Stilen sind vier plastisch gedacht – der Browser hellt und dunkelt die Farbe dafür selbst auf, und wie stark, ist ausdrücklich nicht festgelegt. Wer ein vorhersagbares Ergebnis braucht, bleibt bei durchgehend, gestrichelt und gepunktet. Beim doppelten Rahmen bestimmt ebenfalls der Browser, wie die Breite auf die zwei Linien und den Zwischenraum verteilt wird.

Anonyme Boxen: was der Browser stillschweigend ergänzt

Nicht jede Box im Dokument entspricht einem Element. Steht in einem Block sowohl reiner Text als auch ein Block-Element, kann der Browser die beiden nicht in einem Kontext mischen: Er verpackt den Text in eine anonyme Block-Box, damit alle Kinder desselben Typs sind. Dieselbe Ergänzung geschieht in einer Tabelle, wenn Zeilen oder Zellen im Quelltext fehlen.

Anonyme Boxen sind für das Verständnis wichtig, weil sie nicht ansprechbar sind: Es gibt keinen Selektor für sie, sie erben alle vererbenden Eigenschaften vom umgebenden Element und tragen keine Abstände, Rahmen oder Hintergründe. Wer freien Text in einem Container einfärben will, muss ihn selbst in ein Element setzen.

Die Boxtypen von CSS 2.1 sind damit: Block-Boxen, Inline-Boxen, Zeilenboxen und die anonymen Formen beider. Eine Zeilenbox entsteht für jede Zeile eines Blocks und ist ebenfalls nicht ansprechbar – ihre Höhe ergibt sich aus den Inline-Boxen darin und der Zeilenhöhe, und das ist der Grund für die Lücke unter einem Bild, das als Inline-Element auf der Grundlinie sitzt.

Die Werte dieser Runde stehen gesammelt in der Kapitelseite zum Box-Modell: Ausgangswert, Vererbung und Bezugswert für jede der Abstands- und Rahmeneigenschaften, in einer Tabelle nebeneinander.