Das Box-Modell

Gib einer Box width: 200px, 16px Innenabstand und einen Rahmen von 2px, und standardmäßig nimmt sie auf dem Bildschirm 236 Pixel Breite ein, nicht 200.

Jedes Element ist eine Box

Um eine Seite anzuordnen, macht der Browser aus jedem Element ein Rechteck. Jede Box hat vier Schichten, von innen nach außen. Der Inhaltsbereich enthält den Text oder das Bild. Padding (Innenabstand) ist Raum innerhalb der Box zwischen Inhalt und Rahmen und trägt die Hintergrundfarbe der Box. Der Rahmen (border) ist eine Linie um das Padding. Margin (Außenabstand) ist Raum außerhalb des Rahmens, der andere Boxen wegschiebt. Er ist immer durchsichtig. Die Entwicklerwerkzeuge des Browsers zeichnen genau dieses Schema, wenn du ein Element untersuchst, mit eingetragenen Zahlen.

Kurzschreibweise für vier Seiten

padding, margin und border-width nehmen einen bis vier Werte, im Uhrzeigersinn von oben. padding: 16px setzt alle vier Seiten. padding: 8px 16px setzt oben und unten auf 8 und links und rechts auf 16. padding: 4px 8px 12px 16px setzt oben, rechts, unten und links in dieser Reihenfolge. Jede Seite lässt sich auch einzeln setzen, etwa mit margin-top. border: 2px solid #333 setzt Breite, Stil und Farbe zusammen. Ohne einen Stil wie solid oder dashed wird überhaupt kein Rahmen gezeichnet.

box-sizing: die Einstellung, die fast alle ändern

Standardmäßig legen width und height nur die Größe des Inhaltsbereichs fest, Padding und Rahmen kommen obendrauf. Das ist das Modell content-box, und es macht Layouts umständlich: Zwei Boxen mit width: 50% passen mit etwas Padding nicht mehr nebeneinander. Mit box-sizing: border-box enthält die Breite Padding und Rahmen, und der Inhaltsbereich schrumpft, um Platz zu machen. Viele Stylesheets wenden das gleich zu Beginn auf jedes Element an, mit *, *::before, *::after { box-sizing: border-box; }.

Block- und Inline-Boxen

Boxen verhalten sich je nach ihrem Wert für display unterschiedlich. Block-Boxen wie p, h1 und section beginnen in einer neuen Zeile und dehnen sich auf die Breite ihres Containers aus. Inline-Boxen wie a, strong und span sitzen in einer Textzeile. width und height gelten für sie nicht, und ihr senkrechtes Padding und ihr senkrechter Margin schieben andere Zeilen nicht weg. display: inline-block liegt dazwischen: Die Box fließt wie ein Wort in der Zeile mit, beachtet aber Breite, Höhe und Padding. Das passt für kleine Labels und Buttons.

Margins, die zusammenfallen

Eine Regel überrascht fast alle. Trifft der untere Margin eines Blocks auf den oberen Margin des nächsten, addieren sie sich nicht, sondern der größere gewinnt. Ein Absatz mit margin-bottom: 20px, gefolgt von einer Überschrift mit margin-top: 30px, hat am Ende 30 Pixel Abstand, nicht 50. Das nennt man Margin Collapsing (zusammenfallende Außenabstände). Es betrifft nur senkrechte Margins zwischen Blöcken im normalen Fluss, nicht innerhalb von Flex- oder Grid-Containern. Um einen Block waagerecht zu zentrieren, gib ihm eine width oder max-width und margin: 0 auto: Die beiden automatischen seitlichen Margins teilen sich den freien Platz gleichmäßig.