Das Box-Modell
Jedes HTML-Element ist eine rechteckige Schachtel aus vier Schichten: content (der Inhalt), padding (Innenabstand), border (Rahmen) und margin (Außenabstand). Wer Abstände versteht, versteht 90 % aller „warum sitzt das nicht da, wo ich will"-Probleme.
Von innen nach außen: content → padding → border → margin. Padding ist innerhalb des Rahmens (bekommt die Hintergrundfarbe), margin ist außerhalb (immer durchsichtig).
content
marginborderpaddingcontent
width (CSS)
160px
Inhaltsbreite
160px
Element (bis Rahmen)
200px
Platz inkl. margin
240px
CSSdas stellst du gerade ein
.box {
box-sizing: content-box;
width: 160px;
padding: 16px;
border: 4px solid #f59e0b;
margin: 20px;
}Achtung: width: 160px, aber das Element ist real 200px breit — padding und border kommen obendrauf. Genau das überrascht Anfänger. Schalt auf border-box um.
Warum eigentlich? — Warum stellen Profis fast immer border-box ein?
Mit dem Default content-box bedeutet width: 200px die Breite des Inhalts — padding und border kommen oben drauf, die Box wird breiter als 200px. Das macht Layout-Mathe zur Hölle. Mit border-box meint width: 200px die Breite bis zur Außenkante — was du sagst, ist was du bekommst. Deshalb steht in fast jedem Projekt ganz oben:
CSS
*, *::before, *::after {
box-sizing: border-box;
}Häufiger Denkfehler — margin und padding verwechseln
Sie sehen im Ergebnis ähnlich aus, sind aber verschieden: padding ist Platz innen, bekommt die Hintergrundfarbe und vergrößert die klickbare Fläche. margin ist Platz außen, ist immer durchsichtig und schiebt Nachbarn weg. Faustregel: Abstand zwischen Elementen → margin. Luft um den Inhalt in der Box → padding.
Tiefer rein — Margin Collapsing — der Klassiker, der verwirrt
Zwei vertikal benachbarte margins überlappen, statt sich zu addieren: 20px unten + 30px oben ergeben nicht 50px Abstand, sondern 30px (das größere gewinnt). Das passiert nur vertikal und nur bei Block-Elementen im normalen Fluss — nicht in Flexbox oder Grid. Wenn dein Abstand „kleiner ist als gerechnet", ist es fast immer Margin Collapsing.