Kastenmodell

Der CSS-Podcast – 001: Das Box-Modell

Angenommen, Sie haben diesen HTML-Code:

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

Dann schreiben Sie dieses CSS dafür:

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

Der Inhalt ist 142 Pixel breit statt der von Ihnen angegebenen 100 Pixel und erstreckt sich über das Element hinaus. Warum?

Das Box-Modell ist eine der Grundlagen von CSS. Wenn Sie wissen, wie es funktioniert, wie es von anderen Aspekten von CSS beeinflusst wird und 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 Ihr Inhalt nicht in ein Element passt.

Wichtig: Alles, was von CSS angezeigt wird, ist ein Feld, auch wenn es nur Text ist oder einen border-radius hat, der es wie einen Kreis aussehen lässt.

Inhalt und Größe

Felder verhalten sich je nach display-Wert, festgelegten Abmessungen und Inhalt unterschiedlich. Dieser Inhalt kann reiner Text oder weitere Felder sein, die von untergeordneten Elementen generiert werden. In jedem Fall beeinflusst der Inhalt standardmäßig die Größe des Felds.

Sie können dies mit der externen Größenanpassung steuern oder die interne Größenanpassung verwenden, damit der Browser Entscheidungen für Sie auf Grundlage der Inhaltsgröße trifft.

Hier ist eine einfache Demo, in der der Unterschied erklärt wird:

Wenn das Feld eine externe Größenanpassung hat, gibt es eine Beschränkung für die Menge an Inhalt, die Sie hinzufügen können, bevor es überläuft. Dadurch läuft das Wort „awesome“ über.

In der Demo steht der Text „CSS is awesome“ in einem Feld mit festen Abmessungen und einem dicken Rahmen. Da das Feld eine bestimmte Breite hat, wird es extern angepasst. Das bedeutet, dass die Größe des untergeordneten Inhalts gesteuert wird. Das Wort „awesome“ ist jedoch zu groß für das Feld und läuft daher über den Begrenzungsrahmen des übergeordneten Felds hinaus (mehr dazu später). Eine Möglichkeit, dieses Überlaufen zu verhindern, besteht darin, die Größe des Felds intern anzupassen, indem Sie entweder die Breite nicht festlegen oder in diesem Fall die width auf min-content setzen. Das Keyword min-content weist das Feld an, nur so breit zu sein wie die minimale Breite des Inhalts (das Wort „awesome“). So passt das Feld perfekt um den Text.

Hier ist ein komplexeres Beispiel, das die Auswirkungen verschiedener Größenanpassungen auf echte Inhalte zeigt:

Mit der externen Größenanpassung können Sie die Größe von einem Element steuern. Die interne Größenanpassung verhindert, dass Text überläuft.

Aktivieren und deaktivieren Sie die interne Größenanpassung, um zu sehen, wie Sie mit der externen Größenanpassung mehr Kontrolle haben und mit der internen Größenanpassung der Inhalt mehr Kontrolle hat. Fügen Sie der Karte einige Sätze Text hinzu, um die Auswirkungen zu sehen. Wenn dieses Element eine externe Größenanpassung hat, gibt es eine Beschränkung für die Menge an Inhalt, die Sie hinzufügen können, bevor es überläuft. Das passiert jedoch nicht, wenn die interne Größenanpassung aktiviert ist.

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

Wichtiger Begriff: Überlauf tritt auf, wenn der Inhalt zu groß für das Feld ist, in dem er sich befindet. Mit der Property overflow können Sie festlegen, wie ein Element mit überlaufendem Inhalt umgeht.

Wenn Sie zur internen Größenanpassung wechseln, kann der Browser Entscheidungen für Sie auf Grundlage der Größe des Feldinhalts treffen. Dadurch ist ein Überlauf viel weniger wahrscheinlich, da die Größe des Felds an den Inhalt angepasst wird.

Wichtig: Die interne Größenanpassung ist das Standardverhalten des Browsers und bietet in der Regel viel mehr Flexibilität als die externe Größenanpassung.

Die Bereiche des Box-Modells

Felder bestehen aus verschiedenen Bereichen des Box-Modells, die alle eine bestimmte Aufgabe haben.

Diagramm der vier Hauptbereiche des Boxmodells.
Die vier Hauptbereiche des Box-Modells: Inhaltsfeld, Innenabstand, Rahmen und Außenabstand.

Das Inhaltsfeld ist der Bereich, in dem sich der Inhalt befindet. Der Inhalt kann die Größe des übergeordneten Elements steuern. Daher ist dies in der Regel der Bereich mit der variabelsten Größe.

Der Innenabstand umgibt das Inhaltsfeld und ist der durch die padding Property erstellte Abstand. Da sich der Innenabstand innerhalb des Felds befindet, ist der Hintergrund des Felds im erstellten Abstand sichtbar. Wenn für das Feld Überlaufregeln festgelegt sind, z. B. overflow: auto oder overflow: scroll, nehmen die Scrollbalken ebenfalls diesen Abstand ein.

Scrollbalken befinden sich im Innenabstand.

Der Rahmen umgibt den Innenabstand und sein Abstand wird durch den border Wert definiert, der einen visuellen Rahmen für das Element erstellt. Der Rahmenrand des Elements ist die Grenze dessen, was Sie sehen können.

Der letzte Bereich, der Außenabstand, ist der Abstand um das Feld herum, der durch die Regel des Feldsmargin definiert wird. Auch Properties wie outline und box-shadow nehmen diesen Abstand ein, da sie über dem Element gezeichnet 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.

Ein breiter Rahmen wirkt sich nicht auf die Größe des restlichen Elements aus.

Eine nützliche Analogie

Das Box-Modell ist komplex. Hier ist eine Analogie für das, was Sie bisher gelernt haben.

Das Box-Modell wird mit einem Bilderrahmen veranschaulicht.

In diesem Diagramm sind drei Bilderrahmen nebeneinander an einer Wand angebracht. Die Elemente des gerahmten Bildes entsprechen dem Box-Modell wie folgt:

  • Das Inhaltsfeld ist das Kunstwerk.
  • Der Innenabstand ist die weiße Montageplatte zwischen dem Rahmen und dem Kunstwerk.
  • Der Rahmen ist der Rahmen, der eine buchstäbliche Grenze für das Kunstwerk bildet.
  • Der Außenabstand ist der Abstand zwischen den Rahmen.
  • Der Schatten nimmt denselben Abstand wie der Außenabstand ein.

Fehlerbehebung beim Box-Modell

Die Entwicklertools des Browsers bieten eine Visualisierung der Berechnungen des Box-Modells eines ausgewählten Felds. So können Sie besser verstehen, wie das Box-Modell funktioniert und wie es sich auf die Website auswirkt, an der Sie arbeiten.

So probieren Sie das in Chrome aus:

  1. Öffnen Sie die Entwicklertools.
  2. Wählen Sie ein Element aus.
  3. Zeigen Sie den Debugger für das Box-Modell an.
Der Debugger für das Box-Modell für die Demo mit dem Rahmen.

Das Box-Modell steuern

Um zu verstehen, wie Sie das Box-Modell steuern können, müssen Sie zuerst wissen, 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 den Inhalt leichter lesbar machen.

Das User-Agent-Stylesheet legt den Standardwert für Elemente fest, die display verwenden. Der Standardwert für display eines <div>-Elements ist block, für <li> ist er displaylist-item und für <span> ist er displayinline.

Ein inline-Element hat einen Blockrand, aber andere Elemente berücksichtigen ihn nicht. Bei inline-block berücksichtigen andere Elemente den Blockrand, aber das erste Element behält die meisten Verhaltensweisen bei, die es als inline Element hatte. Ein block Element füllt standardmäßig den verfügbaren Inline-Abstand aus, während inline und inline-block Elemente nur so groß wie ihr Inhalt sind.

Das User-Agent-Stylesheet legt auch Standardwerte für box-sizing fest, mit dem ein Feld seine Größe berechnet. Standardmäßig ist für alle Elemente box-sizing: content-box; festgelegt. Wenn Sie also Abmessungen wie width und height festlegen, gelten diese Abmessungen für das Inhaltsfeld. Wenn Sie dann padding und border festlegen, werden diese Werte zur Größe des Inhaltsfelds hinzugefügt.

Ihr Wissen wird getestet

Testen Sie Ihr Wissen über Properties, die sich auf die Größe des Box-Modells auswirken.

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

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

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

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

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

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

Dieses alternative Box-Modell weist CSS an, die width auf den Rahmen statt auf das Inhaltsfeld anzuwenden. Das bedeutet, dass unsere border und padding nach innen verschoben werden. Wenn Sie also für .my-box eine Breite von 200px festlegen, wird es tatsächlich mit 200px gerendert.

In der folgenden interaktiven Demo können Sie sehen, wie das funktioniert. Wenn Sie den Wert box-sizing ändern, zeigt der blaue Bereich, welches CSS innerhalb des Felds angewendet wird.

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

Diese CSS-Regel wählt jedes Element im Dokument und jedes Pseudo-Element ::before und ::after aus und wendet box-sizing: border-box an. Das bedeutet, dass jedes Element jetzt dieses alternative Box-Modell verwendet.

Da das alternative Box-Modell vorhersehbarer sein kann, fügen Entwickler häufig diese Regel zu Resets und Normalisierungen hinzu, z. B. A (more) Modern CSS Reset.

Ressourcen

User-Agent-Stylesheets

Weiter
Selektoren