Das Box-Modell

Verstehe, wie jedes Element eine Box aus Inhalt, padding, border und margin ist, und meistere box-sizing.

10 Min. · 3 Fragen

In CSS ist jedes Element auf der Seite eine rechteckige Box, auch wenn du sie nicht sehen kannst. Diese Box hat vier Schichten, wie ein gerahmtes Bild an einer Wand: den content (das Bild selbst), das padding (das weiße Passepartout zwischen Bild und Rahmen), den border (der Rahmen selbst) und das margin (der leere Raum zwischen dem Rahmen und den anderen Bildern an der Wand). Das nennen wir das Box-Modell.

Drei Eigenschaften steuern diese Schichten. padding legt den inneren Abstand fest, zwischen dem Inhalt und dem Rahmen. border zeichnet den Rahmen: Du gibst ihm eine Dicke, einen Stil (solid für eine durchgezogene Linie) und eine Farbe. margin legt den äußeren Abstand fest, der benachbarte Elemente wegdrückt. Alle diese Abstände werden in Pixeln (px) angegeben.

.card {
  padding: 16px;
  border: 2px solid black;
  margin: 24px;
}

Du kannst jede Seite einzeln anpassen mit padding-top, padding-right, padding-bottom und padding-left, und dasselbe gilt für margin. Es gibt auch Kurzschreibweisen: Bei zwei Werten gilt der erste für oben und unten, der zweite für links und rechts. So bedeutet padding: 8px 16px; 8 Pixel oben und unten, 16 Pixel links und rechts.

.card {
  padding: 8px 16px;
  margin-top: 32px;
  margin-bottom: 8px;
}

Eine klassische Falle: Wenn du width: 200px; schreibst (die Eigenschaft width legt die Breite fest), decken diese 200 Pixel standardmäßig nur den Inhalt ab. Das padding und der border kommen obendrauf! Eine Box mit width: 200px, padding: 16px und border: 2px nimmt in Wirklichkeit 200 + 16 + 16 + 2 + 2 = 236 Pixel Breite ein. Die Eigenschaft box-sizing: border-box; behebt das: Die angegebene Breite schließt dann padding und border ein. Die Box ist wirklich 200 Pixel breit, und es ist der Inhalt, der schrumpft.

* {
  box-sizing: border-box;
}

.card {
  width: 200px;
  padding: 16px;
  border: 2px solid black;
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Welche Eigenschaft legt den Abstand zwischen dem Inhalt einer Box und ihrem Rahmen fest?
   • margin
   • padding
   • border
   • width
2. Welche Gesamtbreite nimmt ohne box-sizing: border-box eine Box mit width: 100px, padding: 10px und border: 5px solid black ein?
   • 100 Pixel
   • 115 Pixel
   • 130 Pixel
   • 110 Pixel
3. Was bedeutet die Kurzschreibweise margin: 10px 20px;?
   • 10 px links und rechts, 20 px oben und unten
   • 10 px oben und unten, 20 px links und rechts
   • 10 px oben, 20 px unten