Box-Sizing

Die Liste der Rassen hat width: 250px und height: 220px, aber seit wir den Innenabstand hinzugefügt haben, nimmt sie mehr Platz ein. Standardmäßig legen width und height nur die Größe des Inhalts fest, und Innenabstand und Rahmen kommen dazu. Die Liste der Rassen ist deshalb 250 + 2 × 20 + 2 × 2 = 294 Pixel breit (der Inhalt, der Innenabstand auf beiden Seiten und der Rahmen auf beiden Seiten) und 220 + 2 × 20 + 2 × 2 = 264 Pixel hoch.

Das legt die Eigenschaft box-sizing fest, deren Standardwert content-box ist. Das ist nicht sehr praktisch: Immer wenn du den Innenabstand oder den Rahmen änderst, ändert sich die Größe des ganzen Elements. Deshalb gibt es den Wert border-box. Mit ihm schließen width und height den Innenabstand und den Rahmen ein, und stattdessen wird der Inhalt kleiner.

Beide Boxen unten haben width: 200px, padding: 20px und einen 1 Pixel breiten Rahmen. Die erste hat box-sizing: content-box und ist 242 Pixel breit, die zweite hat box-sizing: border-box und ist 200 Pixel breit:

Der Außenabstand ist nie Teil der Größe: Er ist der Platz außerhalb des Rahmens.

Weil border-box viel einfacher zu handhaben ist, beginnen viele Stylesheets mit dieser Regel, die ihn für alle Elemente festlegt:

* {
	box-sizing: border-box;
}

Auf unserer Seite ändert sich dadurch nur die Liste der Rassen. Die anderen Karten haben keine Breite festgelegt, sind also so breit wie ihr Elternelement, und ihr Innenabstand und ihr Rahmen passen immer hinein.

Tipp: Die Größen kannst du mit Untersuchen prüfen: Die Entwicklerwerkzeuge zeigen das Box-Modell des ausgewählten Elements mit allen Zahlen.