Das Box-Modell

Zwiebeln schälen ohne Tränen

Das sog. "CSS Box Model" mit seinen typischen Schichten liegt allen Block-Tags zu Grunde. In diesem Quiz geht es um die wichtigsten Eigenschaften dieses Modells.

1. `padding`

"padding" bedeutet ursprünglich "Polsterung" oder "Wattierung". In der CSS-Welt passt eine andere Übersetzung besser. Welche?

2. `margin`

Die CSS-Eigenschaft margin deklariert ...

3. Das Box-Modell

Alle HTML-Blockelemente sind mit Schichten gleich aufgebaut. Ein Begriff unten gehört nicht dazu. Welcher?

4. Farbe im Hintergrund

Ich möchte den Hintergrund einer Box einfärben. Welche CSS-Eigenschaft kommt dafür zum Einsatz?

5. Farbige "Zwiebelschichten"

Ich definiere den Hintergrund einer Box grün. Welche Schichten im Boxmodell sind durch den untenstehenden CSS-Code betroffen?

#myBox {
	background-color: green;
}

6. Standard-Breite einer Box

Ich erstelle mit HTML eine Box, ohne mit CSS zu definieren, wie breit sie sein soll. Welche Breite nimmt die Box automatisch ein?

7. Die wirkliche Breite der Box

Wie breit ist diese Box effektiv?

#myBox {
	width:  500px;
	padding-left: 50px;
	padding-right: 50px;
}

8. `width` in %

Ich definiere die Breite einer Box mit einem Prozent-Wert. Was muss ich wissen?

#myBox {
	width: 80%;
}

9. `height`

Ich definiere eine Box mit einer fixer Breite, ohne jedoch eine Höhe anzugeben. Was passiert mit der Box, wenn sie sich mit Inhalt füllt?

10. Kurzform `padding` und `margin`

Damit kann Schreibarbeit gespart werden, statt padding-top , padding-right etc. zu notieren, kann ich auch die Kurzform wählen. Doch für was steht das?

#myBox {
	padding: 12px 15px 8px 15px;
}