Kastenmodell

The CSS Podcast – 001: The Box Model

Angenommen, Sie haben diesen HTML-Code:

<p>I am a paragraph of text that has a few words in it.</p>

Dazu schreiben Sie das folgende CSS:

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

Der Inhalt ist 142 px breit anstatt der von Ihnen angegebenen 100 px und ragt über das Element hinaus. Warum?

Das Box-Modell ist eine wichtige Grundlage von CSS. Wenn Sie wissen, wie das Box-Modell funktioniert, wie es von anderen CSS-Aspekten beeinflusst wird und vor allem, wie Sie es steuern können, können Sie vorhersehbareres CSS schreiben.

Wenn Sie das Box-Modell von CSS verstehen, können Sie herausfinden, warum Ihre Inhalte nicht in ein Element passen.

Denken Sie daran, dass alles, was von CSS angezeigt wird, ein Rechteck ist, auch wenn es sich nur um Text handelt oder durch ein border-radius wie ein Kreis aussieht.

Inhalt und Größe

Das Verhalten von Boxen hängt vom display-Wert, den festgelegten Abmessungen und dem Inhalt ab. Diese Inhalte können reiner Text oder weitere Felder sein, die von untergeordneten Elementen generiert werden. In beiden Fällen wirkt sich der Inhalt standardmäßig auf die Größe des Felds aus.

Sie können dies mit extrinsic sizing steuern oder intrinsic sizing verwenden, damit der Browser Entscheidungen für Sie auf Grundlage der Inhaltsgröße trifft.

Hier ist eine einfache Demo, die den Unterschied verdeutlicht:

Wenn die Box eine extrinsische Größe hat, gibt es ein Limit für die Menge an Inhalt, die Sie hinzufügen können, bevor sie überläuft. Dadurch wird das Wort „awesome“ umgebrochen.

In der Demo ist der Text „CSS is awesome“ in einem Feld mit festen Abmessungen und einem dicken Rahmen zu sehen. Da das Feld eine bestimmte Breite hat, wird es extrinsisch dimensioniert. Das bedeutet, dass die Größe der untergeordneten Inhalte gesteuert wird. Das Wort „awesome“ ist jedoch zu lang für das Feld und ragt über die Border Box des übergeordneten Felds hinaus (dazu später mehr). Eine Möglichkeit, diesen Überlauf zu verhindern, besteht darin, die Größe des Felds intrinsisch festlegen zu lassen, indem Sie entweder die Breite nicht festlegen oder in diesem Fall width auf min-content festlegen. Das Keyword min-content weist das Feld an, nur so breit zu sein wie die intrinsische Mindestbreite seines Inhalts (das Wort „awesome“). So passt sich das Feld perfekt an den Text an.

Hier ist ein komplexeres Beispiel, das die Auswirkungen unterschiedlicher Größen auf tatsächliche Inhalte zeigt:

Mit der extrinsischen Größenanpassung können Sie die Größe eines Elements steuern. Durch die intrinsische Größenanpassung wird ein Textüberlauf verhindert.

Aktivieren und deaktivieren Sie die intrinsische Größenanpassung, um zu sehen, wie Sie mit der extrinsischen Größenanpassung mehr Kontrolle haben und wie die Inhalte mit der intrinsischen Größenanpassung mehr Kontrolle haben. Fügen Sie der Karte einige Sätze hinzu, um die Effekte zu sehen. Wenn dieses Element eine extrinsische Größenanpassung hat, gibt es ein Limit für die Menge an Inhalten, die Sie hinzufügen können, bevor es überläuft. Das passiert jedoch nicht, wenn die intrinsische Größenanpassung aktiviert ist.

Standardmäßig hat dieses Element jeweils 400px für width und height. Diese Abmessungen legen strenge Grenzen für alle Elemente innerhalb des Elements fest, die eingehalten werden, sofern der Inhalt nicht zu groß für das Feld ist. Sie können das in Aktion sehen, indem Sie die Bildunterschrift unter dem Blumenbild in etwas ändern, das die Höhe des Felds überschreitet.

Schlüsselbegriff: Ein Überlauf tritt auf, wenn der Inhalt zu groß für den zugehörigen Container ist. Mit der overflow-Eigenschaft können Sie festlegen, wie ein Element mit Inhalten umgeht, die über den Rand hinausgehen.

Wenn Sie auf die intrinsische Größenanpassung umstellen, kann der Browser Entscheidungen für Sie treffen, die auf der Inhaltsgröße des Felds basieren. Dadurch ist ein Überlauf viel weniger wahrscheinlich, da die Größe des Felds an den Inhalt angepasst wird.

Es ist wichtig, sich daran zu erinnern, dass die intrinsische Größenanpassung das Standardverhalten des Browsers ist und in der Regel viel mehr Flexibilität bietet als die extrinsische Größenanpassung.

Die Bereiche des Boxmodells

Boxen bestehen aus verschiedenen Box-Modellbereichen, die alle eine bestimmte Aufgabe erfüllen.

Ein Diagramm, das die vier Hauptbereiche des Box-Modells zeigt: Content-Box, Padding-Box, Border-Box und Margin-Box
Die vier Hauptbereiche des Box-Modells: Inhaltsfeld, Innenabstand, Rahmen und Außenabstand.

Die Inhaltsbox ist der Bereich, in dem sich die Inhalte befinden. Der Inhalt kann die Größe des übergeordneten Elements steuern. Daher ist dies in der Regel der Bereich mit der größten Variabilität.

Die Padding-Box umgibt die Content-Box und ist der durch die Eigenschaft padding erstellte Bereich. Da das Padding innerhalb des Felds liegt, ist der Hintergrund des Felds im dadurch geschaffenen Leerraum sichtbar. Wenn für das Feld Überlaufregeln wie overflow: auto oder overflow: scroll festgelegt sind, belegen die Bildlaufleisten ebenfalls diesen Bereich.

Scrollleisten befinden sich im Padding-Feld.

Der Rahmen umgibt das Padding-Feld. Der Abstand wird durch den Wert border definiert, der einen visuellen Rahmen für das Element erstellt. Die Rahmenkante des Elements ist die Grenze dessen, was Sie sehen können.

Der letzte Bereich, der Rahmen, ist der Platz um das Feld herum, der durch die margin-Regel des Felds definiert wird. Eigenschaften wie outline und box-shadow nehmen ebenfalls diesen Bereich ein, da sie über dem Element gerendert werden und sich nicht auf die Größe des Felds auswirken. Wenn Sie die outline-width von 200px eines Felds ändern, ändert sich nichts innerhalb des Rahmenrands.

Eine breite Kontur hat keine Auswirkungen auf die Größe des restlichen Elements.

Ein nützlicher Vergleich

Das Box-Modell ist komplex. Hier ist eine Analogie, die Ihnen hilft, das bisher Gelernte zu verstehen.

Drei Bilderrahmen.
Das Box-Modell, dargestellt mit physischen Bilderrahmen.

In diesem Diagramm sind drei Bilderrahmen nebeneinander an einer Wand angebracht. Die Elemente des gerahmten Bildes entsprechen dem Boxmodell folgendermaßen:

  • Die Inhaltsbox ist das Artwork.
  • Der Passepartout ist der weiße Karton zwischen dem Rahmen und dem Kunstwerk.
  • Der Rahmen ist der Begrenzungsrahmen für das Artwork.
  • Der Randbereich ist der Abstand zwischen den Frames.
  • Der Schatten nimmt denselben Platz wie das Margin-Feld ein.

Box-Modell debuggen

Die Entwicklertools des Browsers bieten eine Visualisierung der Berechnungen des Boxmodells für ein ausgewähltes Feld. So können Sie besser nachvollziehen, wie das Boxmodell funktioniert und wie es sich auf die Website auswirkt, an der Sie gerade arbeiten.

So probieren Sie es in Chrome aus:

  1. Öffnen Sie die Entwicklertools.
  2. Wählen Sie ein Element aus.
  3. Box-Modell-Debugger anzeigen
Der Box-Model-Debugger für die Outline-Demo.

Box-Modell steuern

Um das Box-Modell zu steuern, müssen Sie zuerst verstehen, was in Ihrem Browser passiert.

Jeder Browser wendet ein User-Agent-Stylesheet auf HTML-Dokumente an. Das Stylesheet definiert, wie Elemente aussehen und sich verhalten sollen, wenn für die Elemente kein CSS definiert ist. Das CSS in User-Agent-Stylesheets variiert je nach Browser, aber jeder Browser hat Standardeinstellungen, die das Lesen von Inhalten erleichtern.

Im User-Agent-Stylesheet wird der Standardwert für Elemente festgelegt, die display verwenden. Der Standardwert für display eines <div>-Elements ist beispielsweise block, für ein <li>-Element ist er list-item und für ein <span>-Element inline.displaydisplay

Ein inline-Element hat einen Blockrand, der von anderen Elementen jedoch nicht berücksichtigt wird. Bei inline-block wird der Blockrand von anderen Elementen berücksichtigt, das erste Element behält jedoch die meisten Verhaltensweisen bei, die es als inline-Element hatte. Ein block-Element füllt standardmäßig den verfügbaren Inline-Bereich aus, während inline- und inline-block-Elemente nur so groß wie ihr Inhalt sind.

Im User-Agent-Stylesheet werden auch Standardwerte für box-sizing festgelegt, mit denen die Größe eines Felds berechnet wird. Standardmäßig sind alle Elemente auf box-sizing: content-box; festgelegt. Wenn Sie Dimensionen wie width und height festlegen, gelten diese Dimensionen für das Inhaltsfeld. Wenn Sie dann padding und border festlegen, werden diese Werte der Größe des Inhaltsfelds hinzugefügt.

Wissen testen

Testen Sie Ihr Wissen über Eigenschaften, die sich auf die Größe des Boxmodells auswirken.

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

Wie breit wird .my-box Ihrer Meinung nach sein?

200 px
Da der Standardwert für box-sizing content-box ist, werden Innenabstand und Rahmen zur Breite hinzugefügt. 200px wäre richtig, wenn die Box box-sizing: border-box hätte.
260 px
Die Standardeinstellung für die Box-Größe ist „content-box“. Das bedeutet, dass Innenabstand und Rahmen zur Gesamtbox hinzugefügt werden.

Die tatsächliche Breite dieses Felds beträgt 260 Pixel. Da im CSS die Standardeinstellung box-sizing: content-box verwendet wird, entspricht die angewendete Breite der Breite des Inhalts. padding und border auf beiden Seiten werden hinzugefügt. 200 px für den Inhalt + 40 px für den Innenabstand + 20 px für den Rahmen ergeben eine sichtbare Gesamtbreite von 260 px.

Sie können dies ändern, indem Sie die Größe von border-box angeben:

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

Bei diesem alternativen Box-Modell wird CSS angewiesen, width auf den Rahmen- statt auf den Inhaltsbereich anzuwenden. Das bedeutet, dass unsere border und padding eingeschoben werden. Wenn Sie also .my-box auf eine Breite von 200px festlegen, wird sie tatsächlich mit einer Breite von 200px gerendert.

In der folgenden interaktiven Demo sehen Sie, wie das funktioniert. Wenn Sie den Wert box-sizing ein- oder ausschalten, wird im blauen Bereich angezeigt, welches CSS innerhalb des Felds angewendet wird.

Vergleiche die Auswirkungen der Größenanpassung von „content-box“ und „border-box“.
*,
*::before,
*::after {
  box-sizing: border-box;
}

Mit dieser CSS-Regel wird jedes Element im Dokument sowie jedes ::before- und ::after-Pseudoelement ausgewählt und box-sizing: border-box angewendet. Das bedeutet, dass für jedes Element jetzt dieses alternative Box-Modell verwendet wird.

Da das alternative Box-Modell besser vorhersagbar ist, fügen Entwickler diese Regel häufig Resets und Normalisierungen hinzu, wie hier.

Ressourcen

User-Agent-Stylesheets