CSS-Kurs / Das Boxmodell: Inhalt, Padding, Rahmen und Außenabstand

Das CSS-Box-Modell beschreibt den Inhaltsbereich, den Innenabstand, den Rahmen und den Außenabstand eines Elements. Diese Bereiche beeinflussen seine sichtbaren Dimensionen und Abstände, während angrenzende vertikale Blockaußenabstände unter bestimmten Bedingungen zusammenfallen können.

Identifizieren Sie die vier Boxbereiche

Das folgende Bild zeigt die Lage der vier Bereiche. Text oder Bilder werden innerhalb des blauen Inhalts platziert, und gelbes Padding sowie ein grüner Rahmen umgeben die Außenseite. Der orange dargestellte Außenabstand liegt außerhalb des Rahmens. Die Farben unterscheiden die Bereiche der Zeichnung; margin wird nicht mit dem Hintergrund des Elements gefüllt.

Bei der standardmäßigen Hintergrundbegrenzung kann eine gesetzte Hintergrundfarbe im Inhaltsbereich, im Padding und hinter dem Rahmen gezeichnet werden. Im Außenabstand (margin) wird der Hintergrund des Elements nicht gezeichnet. Um den farbigen Bereich der Karte zu erweitern, müssen daher die Innenabstände (Padding) erhöht und nicht der Rand (Margin). Wie weit der Hintergrund gezeichnet wird, kann mit einer separaten Eigenschaft geändert werden, aber hier wird das Standardverhalten verwendet.

Berechnen Sie deklarierte und äußere Breiten

.card {
  width: 200px;
  padding: 20px;
  border: 2px solid #2f6e9b;
  margin: 16px;
  background-color: #eaf4fa;
}

Für ein reguläres content-box-Element misst width: 200px den Inhalt. Das Hinzufügen von 20px Padding und 2px Rahmen auf beiden Seiten ergibt eine 244px Border-Box. Die 16px Ränder liegen außerhalb davon, wodurch der horizontale Raum einschließlich beider Ränder 276px beträgt. Vertikale Ränder können kollabieren, daher sollte diese einfache Addition nicht auf jeden vertikalen Fall angewendet werden. Weitere Einzelheiten finden Sie unter CSS-Breite, Höhe, min/max-Grenzen und box-sizing.

Verwenden Sie box-sizing: border-box, um das Padding und den Rahmen in die deklarierte Breite einzubeziehen. Ändert man nur diese Eigenschaft in diesem Beispiel, erhält man eine 200px Border-Box und einen 156px Inhaltsbereich. Der nächste Größenvergleich misst dieselben Karten unter beiden Box-Sizing-Regeln. Siehe MDN: Einführung.

Lesen Sie die Kurzschreibweise mit einem bis vier Werten

Für margin gilt dieselbe Reihenfolge. Zwei Werte stehen für oben/unten und links/rechts, drei für oben, links/rechts und unten. Vier Werte folgen im Uhrzeigersinn: oben, rechts, unten, links. Wenn Sie nur einige Richtungen ändern möchten, verwenden Sie einzelne Eigenschaften wie padding-top. Wenn Sie später Kurzschreibweisen neu schreiben, können sich die zuvor angegebenen Einzelwerte ebenfalls ändern, daher sollten Sie die Anwendungsreihenfolge überprüfen.

padding-inline und margin-block sind logische Eigenschaften, die auf der Schreibrichtung des Textes basieren. Im Allgemeinen entspricht beim horizontalen Schreiben von links nach rechts inline links und rechts und block oben und unten, aber beim vertikalen Schreiben ist die physische Richtung anders. Dies bedeutet nicht immer eine feste horizontale oder vertikale Richtung. Sie können die Richtungszuordnung in MDNs Beschreibung des margin-block nachprüfen.

Verstehen des Zusammenfallens von vertikalen Abständen

Benachbarte vertikale Außenabstände im normalen Blockfluss werden unter bestimmten Bedingungen zu einem gemeinsamen Abstand zusammengefasst. Dies wird als Margin-Collapsing bezeichnet. Positive Abstände, bei denen der untere Rand des vorherigen Elements 20px und der obere Rand des nächsten Elements 30px beträgt, können als ein größerer Wert von 30px statt 50px erscheinen.

Margin-Collapsing kombiniert keine horizontalen Abstände oder Auffüllungen, und Außenabstände von Flex- und Grid-Elementen kollabieren nicht wie normale Blockränder im Fluss. Außenabstände zwischen Eltern- und Kindelementen und negative Abstände führen zu anderen Bedingungen. Diese Übung vergleicht bewusst nur positive vertikale Abstände zwischen zwei Geschwister-Blöcken. Siehe MDN: Margin-Collapsing.

Führen Sie das Beispiel aus und messen Sie jeden Bereich

Speichern Sie den untenstehenden Code als box-model.html in UTF-8 und öffnen Sie ihn. Die erste Karte überprüft die vier Bereiche, und die zwei Reihen innerhalb des gestrichelten Rahmens dienen dazu, das Zusammenfallen der vertikalen Außenabstände zu beobachten. Das letzte Feld zeigt die Padding für drei Werte an.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Box model and spacing exercise</title>
  <style>
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .card { width: 200px; padding: 20px; border: 2px solid #2f6e9b;
      margin: 16px; background-color: #eaf4fa; }
    .collapse-demo { max-width: 300px; padding: 8px; border: 1px dashed #777; }
    .row { padding: 8px; background: #e9f7ef; }
    .first { margin-bottom: 20px; }
    .second { margin-top: 30px; }
    .three-values { max-width: 250px; padding: 10px 20px 30px;
      border: 1px solid #b98022; background: #fff4d9; }
  </style>
</head>
<body>
  <h1>The four box areas</h1>
  <div class="card">The content width is 200px; the width including the border is 244px.</div>
  <h2>Vertical margin collapsing</h2>
  <div class="collapse-demo">
    <div class="row first">Bottom margin: 20px</div>
    <div class="row second">Top margin: 30px</div>
  </div>
  <h2>Padding with three values</h2>
  <div class="three-values">Top: 10px; left and right: 20px; bottom: 30px</div>
</body>
</html>

1. Öffnen Sie in den Entwicklertools unter Elemente die .card und suchen Sie in Styles oder Berechnet nach der Anzeige des Box-Modells. Stellen Sie sicher, dass der Inhalt 200px beträgt, die Padding links und rechts 20px beträgt, der Rahmen 2px beträgt und der Außenabstand 16px beträgt.
2. Ändern Sie nur die Padding auf 30px. Der Inhalt bleibt 200px und die Breite bis zum Rahmen beträgt 264px. Wenn Sie sie wieder auf die ursprünglichen 20px zurücksetzen und margin auf 32px ändern, bleibt die Breite der Karte selbst 244px und der umgebende Abstand ändert sich.
3. Schauen Sie zwischen den beiden Reihen innerhalb des gestrichelten Kastens. Die positiven vertikalen Abstände von 20px und 30px werden kombiniert, wodurch ein Abstand von 30px entsteht. Wenn Sie margin-bottom der ersten Reihe auf 40px ändern, wird der Abstand 40px. Nach dem Vergleich ändern Sie ihn wieder auf 20px zurück.
4. Überprüfen Sie, dass das untere Padding von .three-values 30px beträgt, oben 10px, und links und rechts 20px. Wenn Sie die letzten 30px löschen, um zwei Werte zu machen, wird auch das untere auf 10px.

Abstände, die von den Erwartungen abweichen, können aufgrund des standardmäßigen Außenabstands von p- oder h1-Elementen im Browser, von Selektoren mit höherer Spezifität oder vom Zusammenfallen von Rändern auftreten. Überprüfen Sie zunächst, welches Element welchen Außenabstand hat, und ändern Sie ihn jeweils um einen Wert. Temporäre Änderungen in den Entwicklertools verschwinden beim Aktualisieren, und Änderungen, die Sie in Dateien speichern, müssen manuell auf ihre ursprünglichen Werte zurückgesetzt werden.