Der Margin, auf Deutsch Außenabstand, hält eine Box von ihren Nachbarn frei. Er hat zwei Eigenheiten, die niemand erwartet: Er zählt nicht zur Größe, und senkrechte Abstände fallen zusammen.
- Margin (Außenabstand)
Der Abstand außerhalb des Rahmens, der eine Box von ihren Nachbarn trennt.
Beispiel: „Der Margin ist durchsichtig und zeigt den Hintergrund des Elternelements.“Auch: Außenabstand.
Senkrechte Abstände verschmelzen
Stehen zwei Boxen untereinander, addieren sich ihre senkrechten Außenabstände nicht. Der größere gewinnt. Ein Absatz mit 20 Pixeln unten und eine Überschrift mit 30 Pixeln oben ergeben 30 Pixel, nicht 50.
Dasselbe passiert zwischen Eltern und erstem Kind, wenn kein Rahmen oder Innenabstand dazwischenliegt: Der Abstand des Kindes schiebt dann das Elternelement mit. Waagerecht gibt es diesen Effekt nicht, und in einem Flex-Container oder Raster ebenfalls nicht.
Automatisch zentrieren
Mit margin-inline: auto verteilt der Browser den übrigen Platz gleichmäßig links und rechts. Das ist der klassische Weg, einen Inhaltsbereich mittig zu setzen, und er funktioniert nur bei einer Box mit begrenzter Breite.