CSS / Padding und Margin: Abstände, Breiten und kollabierende Außenabstände

In CSS ist padding der Abstand zwischen Inhalt und Rahmen, während margin außerhalb des Rahmens liegt. Verwenden Sie padding, um das Innere eines Elements einschließlich seines Hintergrunds zu vergrößern, und margin, um seinen Abstand zu umgebenden Elementen anzupassen. Die resultierende Breite hängt von box-sizing ab, und bestimmte vertikale Außenabstände können zusammenfallen, anstatt einfach addiert zu werden.

Unterschiede zwischen padding und margin

Die Box eines Elements besteht aus Inhalt, Padding, Rahmen und Margin, in dieser Reihenfolge von innen nach außen. Der Hintergrund erstreckt sich normalerweise durch das Padding, während die Margin transparent ist. Die Erhöhung des Paddings einer Schaltfläche vergrößert normalerweise deren Hintergrund und die anklickbare Fläche; das Hinzufügen von Margin macht diese äußere Lücke nicht anklickbar.

Beide Eigenschaften akzeptieren Werte wie px, rem und %, aber padding: auto und negatives Padding sind ungültig. Bei den physischen Abstandseigenschaften eines gewöhnlichen horizontalen Schreibmodus beziehen sich Prozentwerte auf die Breite des enthaltenden Blocks, einschließlich der oberen und unteren Werte. Sie sind kein Prozentsatz seiner Höhe. W3C-Definitionen des Box-Modells und der Abstände

Die Richtungen der Kurzschreibweise lesen

Eine Kurzschreibweise mit vier Werten beginnt oben und verläuft im Uhrzeigersinn: rechts, unten, links. Zwei Werte bedeuten vertikal und horizontal; drei bedeuten oben, horizontal, unten. Dieselbe Regel gilt für Padding und Margin.

Verwenden Sie für eine Seite eine Eigenschaft wie padding-top oder margin-left. Eine spätere padding- oder margin-Kurzschreibweise kann zuvor deklarierte Seitenwerte überschreiben, überprüfen Sie also die Reihenfolge der Regeln.

Tatsächliche Breiten am vollständigen Beispiel prüfen

Speichern Sie den untenstehenden vollständigen Code als spacing.html in UTF-8 und öffnen Sie ihn in einem Browser. Es sind weder zusätzliche Bibliotheken noch ein Server nötig. Alpha, Beta und die anderen Wörter sind Vergleichsbezeichnungen. Nach dem Bearbeiten speichern und neu laden. Wählen Sie jeden .box in den Entwicklertools aus und überprüfen Sie das Box-Modell-Diagramm oder die berechneten Stile, um Breiten und Abstände zu überprüfen.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Padding und Margin vergleichen</title>
  <style>
    body { font-family: sans-serif; max-width: 640px; margin: 0 auto; padding: 16px; }
    h2 { font-size: 1.1rem; }
    .stage { padding: 12px; border: 1px dashed #777; overflow-x: auto; }
    .box { width: 200px; padding: 16px; border: 4px solid #17324d; margin: 24px; background: #dcefff; }
    .content-box { box-sizing: content-box; }
    .border-box { box-sizing: border-box; }
    .asymmetric { box-sizing: border-box; padding: 8px 16px 24px 32px; margin: 10px 20px 30px 40px; }
    .center { box-sizing: border-box; margin: 0 auto; }
    .collapse-demo { display: flow-root; border: 1px dashed #777; }
    .item { height: 30px; background: #dcefff; }
    .first { margin: 0 0 24px; }
    .second { margin: 16px 0 0; }
  </style>
</head>
<body>
  <h1>Padding und Margin vergleichen</h1>
  <h2>content-box</h2>
  <div class="stage"><div class="box content-box">Alpha</div></div>
  <h2>border-box</h2>
  <div class="stage"><div class="box border-box">Beta</div></div>
  <h2>padding / margin</h2>
  <div class="stage"><div class="box asymmetric">Gamma</div></div>
  <h2>margin: 0 auto</h2>
  <div class="stage"><div class="box center">Delta</div></div>
  <h2>margin-bottom / margin-top</h2>
  <div class="collapse-demo">
    <div class="item first">A</div>
    <div class="item second">B</div>
  </div>
</body>
</html>

Alpha hat eine Border-Box-Breite von 200 + 16 × 2 + 4 × 2 = 240px. Einschließlich seiner horizontalen Außenabstände nimmt es 240 + 24 × 2 = 288px ein. Beta verwendet Border-Box-Sizing, daher beträgt seine Border-Box-Breite 200px und seine Inhaltsbreite 200 - 16 × 2 - 4 × 2 = 160px. Diese Berechnungen schließen das Padding und den Rahmen des umgebenden Stage-Elements aus.

Gamma hat ein Padding von 8px oben, 16px rechts, 24px unten und 32px links. Seine Außenabstände betragen entsprechend 10px, 20px, 30px und 40px. Vergleichen Sie die sichtbaren Unterschiede mit den obigen Kurzschreibungsrichtungen.

Die Größenberechnung mit box-sizing festlegen

Mit content-box gibt die Breite die Inhaltsbreite an, wobei Innenabstand und Rahmen außerhalb davon hinzugefügt werden. Bei border-box umfasst die angegebene Breite Inhalt, Innenabstand und Rahmen. Keine der beiden Berechnungsarten schließt den Außenabstand (Margin) in die Breite ein. Gewöhnliche div-Elemente verwenden anfänglich content-box, aber das Reset-CSS einer Website kann dies ändern; überprüfen Sie den berechneten Wert.

Ersetzen Sie die .content-box-Regel des Beispiels durch die folgende. Die border-box-Breite von Alpha ändert sich von 240px auf 200px. Lassen Sie die anderen Werte unverändert, vergleichen Sie und stellen Sie content-box wieder her. Wenn Innenabstand und Rahmen zusammen die angegebene Breite überschreiten, kann die Inhaltsbreite nicht negativ werden, sodass das resultierende Kästchen dennoch breiter als erwartet sein kann.

.content-box {
  box-sizing: border-box;
}

MDN-Erklärung zu box-sizing

Einen Block mit automatischen Außenabständen zentrieren

Um einen Block im normalen Fluss horizontal zu zentrieren, muss das Element schmaler als die verfügbare Breite seines übergeordneten Elements sein und seine linken und rechten Außenabstände müssen auf automatisch gesetzt sein. Delta hat eine Breite von 200px und margin: 0 auto, sodass der verbleibende horizontale Platz zwischen beiden Seiten aufgeteilt wird. Allein das Zentrieren kann ein Überlaufen nicht lösen, wenn das übergeordnete Element zu schmal ist.

Wenn ein gewöhnlicher Block mit automatischer Breite bereits den verfügbaren horizontalen Platz ausfüllt, erzeugt das Hinzufügen von automatischen seitlichen Außenabständen keine sichtbare Zentrierwirkung. Im normalen Fluss zentrieren margin-top: auto und margin-bottom: auto ihn nicht vertikal. Automatische Außenabstände in Flexbox oder Grid folgen anderen Layoutregeln, daher sollten diese Kontexte unterschieden werden.

Kollabierende und negative Außenabstände verstehen

Angrenzende, geeignete vertikale Außenabstände können im normalen Block-Layout zusammenfallen. Im letzten Beispiel sind sowohl der untere Außenabstand von A (24px) als auch der obere Außenabstand von B (16px) positiv, sodass ihre Lücke der größere Wert ist, 24px, und nicht 40px. Der Rahmen des übergeordneten Elements verhindert in diesem Beispiel ein Zusammenfallen der Außenabstände zwischen diesem übergeordneten Element und seinen Kindern.

Ändern Sie die .collapse-demo-Regel des Beispiels wie unten. Deren Kinder werden zu Flex-Elementen, deren Außenabstände nicht miteinander zusammenfallen, sodass die Lücke 24 + 16 = 40px beträgt. Vergleichen Sie die Ergebnisse und stellen Sie display: flow-root wieder her. Das Anwenden von flow-root nur auf ein übergeordnetes Element beseitigt nicht alle Zusammenfälle von Außenabständen zwischen Geschwister-Blöcken.

.collapse-demo {
  display: flex;
  flex-direction: column;
  border: 1px dashed #777;
}

In der hier verwendeten horizontalen Schreibrichtung kollabieren linke und rechte Außenabstände nicht auf diese Weise. Wenn beim Kollabieren von Außenabständen positive und negative Werte enthalten sind, wird der größte positive Wert zum negativen Wert mit dem größten absoluten Betrag addiert: 24px und -8px ergeben 16px. Wenn alle negativ sind, wird der negativste Wert verwendet; -8px und -16px ergeben -16px. Eine Deklaration wie margin-left: -8px ist gültig, kann jedoch Überlappungen verursachen oder Inhalte außerhalb ihres übergeordneten Elements verschieben. Überprüfen Sie schmale Bildschirme und Tastatur-Fokus-Anzeigen. Negatives Padding kann denselben Effekt nicht erzeugen. W3C Regeln zum Kollabieren von Außenabständen

Unerwartete Abstände untersuchen

1. Überprüfen Sie die Standardwerte des Browsers. Der standardmäßige Außenabstand des body-Elements oder die standardmäßigen vertikalen Abstände von p und h1 können dazu führen, dass der Abstand größer erscheint als Ihre Deklarationen. Setzen Sie die relevanten Elemente zurück, anstatt blindlings alle Abstände zu entfernen.
2. Bei einem gewöhnlichen, nicht ersetzten Inline-Element wie span beeinflussen vertikale Abstände das Zeilenlayout nicht. Inline-Padding kann dargestellt werden, ohne die angrenzenden Zeilen wie erwartet auseinanderzuschieben. Ziehen Sie inline-block oder einen anderen Layout-Modus in Betracht, wenn die Box eine unabhängige Größe und Abstand benötigt.
3. Verwenden Sie Entwicklertools, um zu überprüfen, dass der Selektor übereinstimmt, die Deklaration gültig ist und keine Regel mit höherer Priorität oder eine spätere Kurzschreibweise diese überschrieben hat. Vergleichen Sie dies auch bei schmaler Breite und prüfen Sie Überlauf sowie die Auswirkung von Padding auf die Breite.

Um den Abstand relativ zur Schreibrichtung zu definieren, verwenden Sie logische Eigenschaften wie padding-inline und margin-block. Im normalen horizontalen Schreiben ist die Inline-Achse horizontal und die Block-Achse vertikal. Diese Achsen ändern sich beim vertikalen Schreiben, sodass sie nicht immer den physischen Links- und Rechtsrichtungen entsprechen.