CSS/Tutorials/Boxmodell/Außen- und Innenabstand

Text-Info

30min

mittel

• Boxmodell
• Einstieg in CSS

Wie im Kapitel zum Boxmodell beschrieben, kommen zur Breite und Höhe von HTML-Elementen noch Außen- und Innenabstände dazu.

Ein Außenrand oder -abstand (margin) ist ein erzwungener Leerraum zwischen dem aktuellen Element und seinem Eltern- bzw. seinen Nachbarelementen.

Ein Innenabstand (padding, englisch: Polsterung) ist ein erzwungener Leerraum zwischen dem Inhalt eines Elements und seinem eigenen Elementrand, also z. B. zwischen dem Text eines Elements und dem Rand dieses Elements.

Daneben gibt es für mehrspaltige Layouts wie Grid Layout, Flexbox und columns noch einen Zwischenabstand zwischen den Feldern, der mit gap (engl. für Lücke) definiert werden kann.

Außenabstand oder nicht?

Bevor wir Elemente individuell stylen, sollten wir einmal einen Blick auf eine typische Webseite ohne eigene Festlegungen werfen:

Abstände mit Default-Einstellungen der Browser ansehen …

body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}

a {
	margin: 1em;
}
section p {
	margin-top: 5em;
}

ansehen …

Der body enthält ein Grid, das mit gap zwischen den Rasterfeldern einen Zwischenabstand von 1em hat. Zwischen der h1-Überschrift und den beiden Boxen darunter scheint der Abstand aber größer. Hier wirken die Einstellungen der Default-Stylesheets der Browser.

Beachten Sie: Öffnen Sie das Beispiel und mit F12 Ihren Seiteninspektor! Wenn Sie im Inspektor über die HTML-Elemente fahren, sehen Sie, dass h1, h2 und p-Elemente noch einen Außenabstand nach oben und unten haben.

Die Seitenstrukturierungselemente sind farbig gefüllt und mit einer Randlinie versehen. Hier fällt auf, dass der Text links am Rand beginnt und die Randlinien ohne weitere Innenabstände an den Text stoßen.

Es gibt zwei Festlegungen von Außenabständen:

• Der Absatz im grünen section-Element hat ein margin-top: 5em. Folglich wird er ein ganzen Stück von der h2-Überschrift abgerückt.
• Die Links in der Navigation haben mit margin: 1em einen gleichmäßigen Abstand nach allen Seiten. Allerdings wird er nur nach rechts und links dargestellt, da das a-Element as Inline-Element die Höhe des Elternelements ausfüllt.

Beachten Sie: Bei Inline-Elementen sind margin-top und margin-bottom wirkungslos.

Empfehlung: Um die (damals vorhandenen) Darstellungsunterschiede der einzelnen Browser auszuschalten, wurden Webseiten früher „normalisiert“, indem alle Innen- und Außenabstände auf 0 gesetzt wurden. Dann musste - besonders in verschachtelten Navigationslisten - jedes Element wieder formatiert werden.
Verzichten Sie auf einen solchen Reset und vertrauen Sie den Einstellungen des Browsers!

padding oder margin?

Es wird oft gefragt, welche der beiden Eigenschaften man verwenden soll – padding oder margin?

• margin kann den Weißraum um Text und Seiteninhalt vergrößern und so die Seite übersichtlicher wirken lassen.
  Die margin-"Flächen" sind aber immer transparent und lassen sich nicht gestalten.
• Wenn die Box eine eigene Hintergrundfarbe hat, sollte der Rand innerhalb des Rahmens liegen, damit der Text nicht an den gedachten Rahmen oder die Farbgrenze stößt. Hier wäre ein padding empfehlenswert.
• margins können überlappen (→ Collapsing margins). D.h. wenn ich zwei Boxen übereinander habe, und beide haben margin: 2em, dann ist der Abstand zwischen den Boxen 2em, nicht 4em.

Mit negativen Werten, also Angaben wie beispielsweise margin-top: -50px, können Sie für besondere gestalterische Zwecke eine Überlappung von Elementen erreichen.

margin und padding - mit 1 - 4 Werten

Sie können jeweils jede Seite eines Elements getrennt formatieren, oder mit margin die zusammenfassende Eigenschaft von margin-top, margin-right, margin-bottom und margin-left verwenden. Auch bei padding gibt es die möglichen Einzelangaben padding-top, padding-right, padding-bottom und padding-left. Solcherart Eigenschaften bezeichnet man auch als zusammenfassende Eigenschaften (shorthand properties).

margin und padding mit 1-4 Werten ansehen …

.ein_wert {
	margin: 1em;
	padding: 1em;
}

.zwei_werte {
	margin: 1em 3em;
	padding: 1em 3em;
}

.drei_werte {
	margin: 2em 1em 3em;
	padding: 2em 1em 3em;
}

.vier_werte {
	margin: 1em 2em 3em 4em;
	padding: 1em 2em 3em 4em;
}

ansehen …

Im Beispiel gibt es ein Grid mit 6 divs. Das Grid erhält mit gap: 2em 1em; einen Innenabstand von 2em nach oben und unten und 1em horizontal. Dieser Abstand gilt aber nicht bei außenliegenden Rasterfeldern.

Das div ist hellgrün eingefärbt und enthält je ein p-Element.

Das p-Element erhält nun eine weiße Füllfarbe und enthält den Textinhalt in einem semantisch sinnfreien span-Element. Dieses wird mit display:block; zum Blockelement und erhält einen gepunkteten Rand.

Jetzt wird jedem Absatz sowohl ein Außenabstand mit margin als auch ein Innenabstand mit padding zugewiesen.

Im linken oberen Absatz gibt es …

• eine Polsterung mit 1em, die den durchgezogenen Rand gleichmäßig vom Textinhalt trennt. Diese Polsterung ist in der Füllfarbe des Elements gestylt.
• einen Außenabstand von 1em. Dieser Raum enthält die Füllfarbe des Elternelements. Nach unten ist der Abstand größer als 1em, da die divs als Rasterfelder innerhalb einer Reihe gleich hoch sind.

Im rechten oberen Absatz gibt es je 2 Werte, die …

• den Innenabstand und …
• den Außenabstand oben und unten auf 1em; rechts und links auf 3em festlegen.

Im dritten Absatz gibt es je 3 Werte, die …

• den Innenabstand und …
• den Außenabstand oben auf 2em Breite; rechts auf 1em Breite und unten auf 3em Höhe festlegen.
  Zuerst wird der obere Werte berechnet, der zweite Wert git für rechts, der dritte für unten. In Ermangelung eines vierten Werts wird der zweite Wert auch für den linken Abstand herangezogen.

Im vierten Absatz gibt es 4 verschiedene Werte, die im Uhrzeigerseinn auf die Seitenränder angewandt werden.

Der 5. Absatz enthät keine gesonderten CSS-Festlegungen. Im Default-Stylesheet erhalten Absätze einen Außenabstand nach oben und unten, aber keinen rechts und links. Durch die festegelegte Breite von 10em erstreckt sich der Absatz aber nicht bis zum rechten Rand. Es gibt keinen Innenabstand, der Text stößt direkt an die Randlinie.

Wenn Sie Block-Elemente zentrieren wollten, mussten Sie bisher immer mindesten 2 Werte angeben:

body {
  max-width: 50em;
  margin: 0 auto;
}

Mitterweile gibt es dafür die margin-inline-Eigenschaft, die nur die horizontalen Abstände formatieren kann, ohne auch eine Festlegung für den vertikalen Abstand treffen zu müssen.

Der 6. Block enthält so eine horizontae Zentrierung mit margin-inline. Damit der Textinhalt nicht an die Randinie stößt, erhät er mit padding-inline eine kleine Polsterung.

Fazit:

Dieses Beispiel ist eher technisch und zeigt die Möglichkeiten. Im normalen Einsatz würde man Elementen mit Hintergrundfarbe eine kleine Polsterung geben und bei den Außenabständen im Regelfall die Browsereinstellungen belassen.

Ausnahmen gibt es bei Textabsätzen, die besonders abgesetzt und hervorgehoben werden sollen.

Sobald die eigenen Festlegungen auf andere Formatierungen treffen kann es zu unerwateten Nebenwirkungen kommen:

Zusammenfallende Außenabstände

benachbarte Geschwister-Elemente

Treffen ein margin-bottom eines Elementes und ein margin-top eines anderen Elementes zusammen, so wird der Gesamtabstand der beiden Elemente nach folgenden Regeln ermittelt:

• Falls eines der beiden Elemente eine von static abweichende Positionierung hat oder per float aus dem Elementfluss entfernt wurde, werden beide Abstandsangaben berücksichtigt.

Beispiel

...
<style>

  #id1 { margin-bottom: 80px; }
  #id2 { margin-top:    20px; }

</style>
...
<body>
  <div id="id1">Text</div>
  <div id="id2">Text</div>
</body>
...

Die beiden Div-Elemente haben einen Abstand von 100px.

• Falls sich beide Elemente im normalen Elementfluss befinden und beide margin-Angaben das gleiche Vorzeichen haben, wird derjenige der beiden margin-Werte berücksichtigt, der den gößeren Betrag hat.

Beispiel

...
<style>

  #id1 { margin-bottom: 80px; }
  #id2 { margin-top:    20px; }

</style>
...
<body>
  <div id="id1">Text</div>
  <div id="id2">Text</div>
</body>
...

Die beiden Div-Elemente haben einen Abstand von 80px.

Beispiel

...
<style>

  #id1 { margin-bottom: -80px; }
  #id2 { margin-top:    -20px; }

</style>
...
<body>
  <div id="id1">Text</div>
  <div id="id2">Text</div>
</body>
...

Die beiden div-Elemente haben einen (gerichteten) Abstand von -80px (-80 ist die Zahl mit dem größeren Betrag. Die beiden divs tauschen hier ihre Position, der Abstand zwischen der Oberkante von "id2", welches das obere ist, und der Unterkante von "id1" beträgt 80px.)

• Falls sich beide Elemente im normalen Elementfluss befinden und die beiden margin-Angaben unterschiedliches Vorzeichen haben, so ist der Abstand gleich der Summe der beiden Werte.

Beispiel

...
<style>

  #id1 { margin-bottom:  80px; }
  #id2 { margin-top:    -20px; }

</style>
...
<body>
  <div id="id1">Text</div>
  <div id="id2">Text</div>
</body>
...

Die beiden div-Elemente haben einen Abstand von 60px. (80 + (-20) = 60)

Beispiel

...
<style>

  #id1 { margin-bottom: -80px; }
  #id2 { margin-top:     20px; }

</style>
...
<body>
  <div id="id1">Text</div>
  <div id="id2">Text</div>
</body>
...

Die beiden div-Elemente haben einen (gerichteten) Abstand von -60px. ((-80) + 20 = -60, die beiden Divs tauschen hier ihre Position, der Abstand zwischen der Oberkante von "id2", welches das obere ist, und der Unterkante von "id1" beträgt 60px.)

Element und Elternelement

Treffen ein margin-top eines ersten Kindes und ein margin-top seines Elternelementes oder ein margin-bottom eines letzten Kindes und ein margin-bottom seines Elternelementes zusammen, so wird der Gesamtabstand nach folgenden Regeln berechnet:

• Falls das Elternelement einen oberen bzw. unteren Rand hat oder für dieses ein oberer bzw. unterer Innenabstand definiert ist, werden beide Abstandsangaben berücksichtigt.

Beispiel

...
<style>

  #id1 { margin-top: 80px; }
  #id2 { margin-top: 20px; }

</style>
...
<body>
  <div id="oben">oben</div>
  <div id="id1">Text
    <div id="id2">Text</div>
  </div>
</body>
...

Das div-Element "id2" hat vom Objekt "oben" einen Abstand von 100px ggf. zuzüglich padding-top von "id1".

• Falls das Elternelement keinen oberen bzw. unteren Rand hat und für dieses kein oberer bzw. unterer Innenabstand definiert ist und beide margin-Angaben dasselbe Vorzeichen haben, wird derjenige der beiden margin-Werte berücksichtigt, der den größeren Betrag hat.

Beispiel

...
<style>

  #id1 { margin-top: 80px; }
  #id2 { margin-top: 20px; }

</style>
...
<body>
  <div id="oben">oben</div>
  <div id="id1">Text
    <div id="id2">Text</div>
  </div>
</body>
...

Das Div-Element "id2" hat vom Objekt "oben" einen Abstand von 80px.

Beispiel

...
<style>

  #id1 { margin-top: -80px; }
  #id2 { margin-top: -20px; }

</style>
...
<body>
  <div id="oben">oben</div>
  <div id="id1">Text
    <div id="id2">Text</div>
  </div>
</body>
...

Der obere Rand von "id2" befindet sich jetzt oberhalb des unteren Randes von "oben". Der Abstand des oberen Randes von "id2" zum unteren Rand von "oben" beträgt 80px.

• Falls das Elternelement keinen oberen bzw. unteren Rand hat und für dieses kein oberer bzw. unterer Innenabstand definiert ist und beide margin-Angaben unterschiedliches Vorzeichen haben, so ist der Gesamtabstand gleich der Summe der beiden Werte.

Beispiel

...
<style>

  #id1 { margin-top:  80px; }
  #id2 { margin-top: -20px; }

</style>
...
<body>
  <div id="oben">oben</div>
  <div id="id1">Text
    <div id="id2">Text</div>
  </div>
</body>
...

Das Div-Element "id2" hat vom Objekt "oben" einen Abstand von 60px. (80 + (-20) = 60)

Beispiel

...
<style>

  #id1 { margin-top: -80px; }
  #id2 { margin-top:  20px; }

</style>
...
<body>
  <div id="oben">oben</div>
  <div id="id1">Text
    <div id="id2">Text</div>
  </div>
</body>
...

Der obere Rand von "id2" befindet sich jetzt oberhalb des unteren Randes von "oben". Der Abstand des oberen Randes von "id2" zum unteren Rand von "oben" beträgt 60px. ((-80) + 20 = -60)

Zusammenfallende Außenabstände (collapsing margins)

Zwei oder mehr benachbarte Außenabstände (margins) können sich miteinander verbinden und so einen einzigen Abstand bilden. Dieser Vorgang wird zusammenfallen genannt und der so entstandene Abstand wird zusammengefallener Außenabstand (englisch: collapsed margin) genannt.

Horizontale Außenabstände fallen nicht zusammen.

Vertikale Außenabstände können zusammenfallen, wenn sie zu einer Block-Box gehören und weder durch Innenabstände (padding), Rahmen (border), Inlineelemente (mit einer Höhe größer als Null) oder Clearance voneinander getrennt sind. Die Beziehung der Boxen zueinander spielt keine Rolle, folgende Paare können daher zusammenfallen:

• Oberer Außenabstand einer Box und oberer Außenabstand der ersten Kind-Box.
• Unterer Außenabstand einer Box und oberer Außenabstand der nachfolgenden Box.
• Unterer Außenabstand einer Box und unterer Außenabstand der letzten Kind-Box.
• Oberer und unterer Außenabstand einer Box, wenn diese keine Höhe bzw. keinen Inhalt hat.

Fallen positive Außenabstände zusammen, besteht der entstehende Außenabstand aus dem Maximum der zusammengefallenen Außenabstände.

Hinweis:

Das erste in der Liste genannte Paar führt manchmal zu Verwirrung. Aus Sicht von Autoren wird oft gewünscht, dass der festgelegte Außenabstand einer Kind-Box von der Eltern-Box umschlossen wird. Dieses gestalterische Ziel kann durch das Festlegen eines oberen Innenabstands oder eines oberen Rahmens für die Eltern-Box erreicht werden.

Beispiel

#geschwister-box { background-color: darkgrey; }
#eltern-box { margin-top: 1em; background-color: silvergrey; }
#kind-box { margin-top: 2em; }

<div id="geschwister-box">Geschwister-Box.</div>
<div id="eltern-box">
 <div id="kind-box">Kind-Box.</div>
</div>

In diesem Beispiel fallen die oberen Außenabstände der Eltern-Box (hier 1em) und der Kind-Box (hier 2em) zusammen. Zwischen der Geschwister-Box und der Eltern-Box entsteht so ein Abstand von 2em. Der Inhalt der Kind-Box scheint dadurch an der oberen Kante der Eltern-Box zu kleben.

Durch die Definition eines oberen Innenabstands oder eines oberen Rahmens für die Eltern-Box können die Außenabstände von Eltern- und Kind-Box bewahrt werden: Zwischen Geschwister- und Eltern-Box entsteht ein Abstand in Höhe von 1em und der Abstand der Kind-Box zur Oberkante der Elternbox beträgt 2em.

Fallen positive und negative Abstände zusammen, so wird das Maximum der absoluten Werte der negativen Außenabstände vom Maximum der absoluten Werte der positiven Außenabstände abgezogen.

Beispiel

#kind-box-1 { margin-bottom: -1em; }
#eltern-box-1 { margin-bottom: 2em; }
#eltern-box-2 { margin-top: -3em; }
#kind-box-2 { margin-top: 4em; }

<div id="eltern-box-1">
 <div id="kind-box-1">Kind-Box 1.</div>
</div>
<div id="eltern-box-2">
 <div id="kind-box-2">Kind-Box 2.</div>
</div>

Dieses Beispiel zeigt vier benachbarte Außenabstände. Zunächst wird das Maximum der positiven Außenabstände ermittelt (mathematisch max(2em, 4em) = 4em), anschließend das absolute Maximum der negativen Außenabstände (mathematisch max(|-1em|, |-3em|) = 3em). Das negative Maximum wird vom positiven Maximum abgezogen (4em minus 3em = 1em), d. h. zwischen beiden Eltern-Boxen entsteht ein Abstand von 1em.

Allgemeine Ausnahmen

Nicht alle vertikalen Außenabstände fallen zusammen, folgende Ausnahmen gibt es:

• Die Außenabstände, die für das Wurzelelement (in HTML das html-Element) festgelegt wurden, fallen nicht mit anderen Außenabständen zusammen.
• Außenabstände von Boxen, die einen neuen Blockformatierungskontext erzeugen (z. B. Tabellenüberschriften oder Boxen mit einem anderen Wert für overflow als visible) fallen nicht mit den Außenabständen von Kind-Boxen zusammen.
• Die Außenabstände von floats, inline-Blöcken und absolut positionierten Boxen fallen nicht mit den Außenabständen anderer Boxen zusammen (also weder mit Abständen benachbarter Boxen noch mit Abständen von Kind-Boxen).
• Der untere Außenabstand einer Box fällt nicht mit dem unteren Außenabstand der letzten Kind-Box zusammen, wenn die Höhe der Elternbox mit height festgelegt wurde.

Beachten Sie: Zwar ist es nicht unmittelbar ersichtlich, jedoch folgt daraus, dass der untere Außenabstand einer Box mit dem unteren Außenabstand der letzten Kind-Box zusammenfallen darf, selbst wenn der Eltern-Box eine Mindest- min-height oder Maximalhöhe max-height zugewiesen wurde.

Ausnahme Clearance

Erzeugt ein Element Clearance (d. h. das Element wird Aufgrund seiner clear-Eigenschaft unter ein floatendes Element geschoben), so wird verhindert, dass der obere Außenabstand des clearenden Elements mit einem anderen Außenabstand zusammenfällt. Dies kann dazu führen, dass das clearende Element vertikal höher positioniert wird, als es wäre, wenn es die clear-Eigenschaft nicht besäße.

Fallen die Außenabstände eines clearenden Elements ggfs. auch mit den Außenabständen nachfolgender Elemente zusammen, so fällt der dabei entstehende Außenabstand nicht mit dem unteren Außenabstand des Elternelements zusammen.

Hauptartikel: CSS/Tutorials/Ausrichtung

Anwendung zusammenfallender Außenabstände

Das Prinzip der zusammenfallenden Außenabstände ist relativ komplex und kann bei der Gestaltung von Layouts zum Stolperstein werden. Dennoch handelt es sich um ein wichtiges Verhalten, das oftmals die intuitive Erwartungshaltung von Autoren erfüllt.

Beispiel

@media print {
 h3 { margin: 20pt 0; }
 p { margin: 12pt 0;}
}

<h3>Überschrift</h3>
<p>Absatz Eins.</p>
<p>Absatz Zwei.</p>

In diesem Beispiel besitzt das Überschriftenelement einen größeren vertikalen Außenabstand als die Absatzelemente. Ziel der Definition ist es, die Überschrift von den Absätzen etwas abzuheben. Der gewünschte Abstand zwischen Überschrift und Absatz beträgt dabei 20 Punkte. Diese Darstellung wird jedoch nur erreicht, wenn die Außenabstände zusammenfallen.

Der Vorteil liegt darin, dass bei der Gestaltung der Überschrift die Gestaltung der Absätze nicht berücksichtigt werden muss. Auch die Abstände der Absätze zueinander entsprechen mit 12 Punkten eher dem Autorenwunsch als ein kumulierter Abstand von 24 Punkten.

Hinweis:

Das Konzept der zusammenfallenden Außenabstände ist nicht nur in CSS bekannt. Ein ähnliches Verhalten können Sie auch in verschiedenen Textverarbeitungsprogrammen beobachten.

Padding-bottom height fix

Wenn Sie für padding-bottom oder padding-top einen prozentualen Wert verwenden, wird dieser nach der Breite des Elements berechnet. Dies können Sie sich zunutze machen, wenn Sie ein bestimmtes Seitenverhältnis anstreben.

Quadrat mit dem padding-bottom height fix

.quadrat {
  width: 500px;
  height: 0;
  padding-bottom: 100%;

So entsteht ein Quadrat mit gleichen Seitenlängen. Auch ein festes Verhältnis von 16:9 ist so möglich:

Element mit Seitenverhältnis 16:9

.videoscreen {
  width: 1000px;
  height: 0;
  padding-bottom: 56.25%;
  background: url(/images/happy-birthday.svg);

aspect-ratio

Einfacher geht dies heutzutage mit der aspect-ratio-Eigenschaft, die auch Elemente mit Inhalt formatieren kann.

Siehe auch

• css-tricks: Aspect Ratio Boxes (Boxen mit festen Seitenverhältnissen)
• Bilderwand aus Quadraten (im Grid Layout)
• SVG/Tutorials/Einstieg/SVG in responsiven Webseiten#padding-bottom height fix (festes Seitenverhältnis für SVG-Grafiken)

• übergroßer Inhalt
• Boxmodell(Übersicht)
• Logische Eigenschaften

Siehe auch

• Referenz: margin