Das Box-Modell

In CSS gibt es mehrere Arten von Boxen, die im Allgemeinen in die Kategorien Block-Boxen und Inline-Boxen fallen. Der Typ bezieht sich darauf, wie sich die Box in Bezug auf den Seitenfluss und in Bezug auf andere Boxen auf der Seite verhält. Boxen haben einen inneren Anzeigetyp und einen äußeren Anzeigetyp.

Im Allgemeinen können Sie verschiedene Werte für den Anzeigetyp mit der Eigenschaft display festlegen, die verschiedene Werte haben kann.

Wenn eine Box einen Anzeigewert von block hat, dann:

• Wird die Box in einer neuen Zeile angezeigt.
• Die Eigenschaften width und height werden berücksichtigt.
• Abstände (Padding), Rand und Rahmen verursachen, dass andere Elemente von der Box weggeschoben werden.
• Wenn width nicht angegeben ist, wird sich die Box in Inline-Richtung ausdehnen, um den verfügbaren Platz in ihrem Container zu füllen. In den meisten Fällen wird die Box so breit wie ihr Container und füllt 100 % des verfügbaren Platzes.

Einige HTML-Elemente wie <h1> und <p> verwenden standardmäßig block als ihren äußeren Anzeigetyp.

Wenn eine Box einen Anzeigetyp von inline hat, dann:

• Wird die Box nicht in einer neuen Zeile angezeigt.
• Die Eigenschaften width und height gelten nicht.
• Obere und untere Abstände (Padding), Ränder und Rahmen werden angewendet, bewirken jedoch nicht, dass sich andere Inline-Boxen von der Box entfernen.
• Linke und rechte Abstände (Padding), Ränder und Rahmen werden angewendet und führen dazu, dass sich andere Inline-Boxen von der Box entfernen.

Einige HTML-Elemente wie <a>, <span>, <em> und <strong> verwenden standardmäßig inline als ihren äußeren Anzeigetyp.

Block- und Inline-Layout ist das Standardverhalten im Web. Standardmäßig und ohne andere Anweisungen werden die Elemente innerhalb einer Box auch in normalem Fluss angeordnet und verhalten sich wie Block- oder Inline-Boxen.

block und inline Anzeigewerte werden als äußere Anzeigetypen bezeichnet — sie beeinflussen, wie die Box in Bezug auf andere Boxen um sie herum angeordnet wird. Boxen haben auch einen inneren Anzeigetyp, der bestimmt, wie Elemente innerhalb dieser Box angeordnet werden.

Sie können den inneren Anzeigetyp ändern, indem Sie einen inneren Anzeigewert festlegen, zum Beispiel display: flex;. Das Element wird weiterhin den äußeren Anzeigetyp block verwenden, aber dies ändert den inneren Anzeigetyp zu flex. Alle direkten Kinder dieser Box werden zu Flex-Elementen und verhalten sich gemäß der Flexbox-Spezifikation.

Wenn Sie sich weiter mit CSS-Layout beschäftigen, werden Sie auf flex stoßen und verschiedene andere innere Werte, die Ihre Boxen haben können, zum Beispiel grid.

Machen Sie sich noch nicht allzu viele Gedanken über die innere und äußere Terminologie; dies ist das, was intern passiert, und wir erwähnen es hier, falls Sie darauf stoßen. Im Allgemeinen werden Sie nur mit einzelnen display-Werten umgehen und müssen nicht viel darüber nachdenken.

Das folgende Beispiel enthält drei verschiedene HTML-Elemente, von denen alle einen äußeren Anzeigetyp von block haben.

• Ein Absatz mit einem Rahmen, der in CSS hinzugefügt wurde. Der Browser rendert dies als Block-Box. Der Absatz beginnt in einer neuen Zeile und erstreckt sich über die gesamte verfügbare Breite.

• Eine Liste, die mit display: flex gestaltet ist. Dies etabliert ein Flex-Layout für die Kinder des Containers, die Flex-Elemente sind. Die Liste selbst ist eine Block-Box und — wie der Absatz — breitet sich über die gesamte Breite des Containers aus und bricht in eine neue Linie um.

• Ein Blockabsatz, in dem sich zwei <span>-Elemente befinden. Diese Elemente wären normalerweise inline, jedoch hat eines der Elemente die Klasse "block", die auf display: block gesetzt wird.

<p>I am a paragraph. A short one.</p>
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<p>
  I am another paragraph. Some of the <span class="block">words</span> have been
  wrapped in a <span>span element</span>.
</p>

body {
  font-family: sans-serif;
}
p,
ul {
  border: 2px solid rebeccapurple;
  padding: 0.2em;
}

.block,
li {
  border: 2px solid blue;
  padding: 0.2em;
}

ul {
  display: flex;
  list-style: none;
}

.block {
  display: block;
}

Im nächsten Beispiel können wir sehen, wie inline-Elemente sich verhalten.

• Die <span>-Elemente im ersten Absatz sind standardmäßig inline und erzwingen daher keine Zeilenumbrüche.

• Das <ul>-Element, das auf display: inline-flex gesetzt ist, erstellt eine Inline-Box, die einige Flex-Elemente enthält.

• Die beiden Absätze sind beide auf display: inline gesetzt. Der Inline-Flex-Container und die Absätze laufen alle in einer Zeile zusammen, statt in neue Zeilen umzubrechen (wie sie es täten, wenn sie als Blocklevel-Elemente angezeigt würden).

Um zwischen den Anzeigemodi zu wechseln, können Sie display: inline in display: block oder display: inline-flex in display: flex ändern:

<p>
  I am a paragraph. Some of the
  <span>words</span> have been wrapped in a <span>span element</span>.
</p>
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<p class="inline">I am a paragraph. A short one.</p>
<p class="inline">I am another paragraph. Also a short one.</p>

body {
  font-family: sans-serif;
}
p,
ul {
  border: 2px solid rebeccapurple;
}

span,
li {
  border: 2px solid blue;
}

ul {
  display: inline-flex;
  list-style: none;
  padding: 0;
}

.inline {
  display: inline;
}

Das Wichtigste, das Sie sich merken sollten, ist: Das Ändern des Wertes der display-Eigenschaft kann ändern, ob der äußere Anzeigetyp einer Box block oder inline ist. Dies ändert die Art und Weise, wie es neben anderen Elementen im Layout angezeigt wird.

Das CSS-Box-Modell insgesamt gilt für Block-Boxen und definiert, wie die verschiedenen Teile einer Box — Rand, Rahmen, Abstände und Inhalt — zusammenarbeiten, um eine Box zu erstellen, die Sie auf einer Seite sehen können. Inline-Boxen verwenden nur einen Teil des Verhaltens, das im Box-Modell definiert ist.

Um Komplexität hinzuzufügen, gibt es ein Standard- und ein alternatives Box-Modell. Standardmäßig verwenden Browser das Standard-Box-Modell.

Eine Block-Box in CSS besteht aus:

• Inhaltsbox: Der Bereich, in dem Ihr Inhalt angezeigt wird; größenmäßig können Sie ihn mit Eigenschaften wie width und height anpassen.
• Abstandsbox: Der Abstand umgibt den Inhalt als Leerraum; größenmäßig können Sie ihn mit padding und verwandten Eigenschaften anpassen.
• Rahmenbox: Die Rahmenbox umgibt den Inhalt und jeden Abstand; größenmäßig können Sie ihn mit border und verwandten Eigenschaften anpassen.
• Randbox: Der Rand ist die äußerste Schicht, die den Inhalt, Abstände und Rahmen als Leerraum zwischen dieser Box und anderen Elementen umgibt; größenmäßig können Sie ihn mit margin und verwandten Eigenschaften anpassen.

Das folgende Diagramm zeigt diese Schichten:

Im Standard-Box-Modell definieren die Werte für die Eigenschaften width und height einer Box die width und height der Inhaltsbox. Jeder Abstand und Rahmen wird dann zu diesen Dimensionen hinzugefügt, um die Gesamtgröße der Box zu bestimmen (siehe Bild unten).

Nehmen wir an, eine Box hat das folgende CSS:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Der tatsächliche Raum, den die Box einnimmt, wird 410px breit (350 + 25 + 25 + 5 + 5) und 210px hoch (150 + 25 + 25 + 5 + 5) sein.

Im alternativen Box-Modell ist jede Breite die Breite der sichtbaren Box auf der Seite. Die Breite des Inhaltsbereichs ist die Breite minus der Breite für Abstände und Rahmen (siehe Bild unten). Es ist nicht notwendig, Rahmen und Abstände zusammenzurechnen, um die tatsächliche Größe der Box zu erhalten.

Um das alternative Modell für ein Element zu aktivieren, setzen Sie box-sizing: border-box darauf:

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

Nehmen wir an, die Box hat das gleiche CSS wie oben:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Nun wird der tatsächliche Raum, den die Box einnimmt, 350px in Inline-Richtung und 150px in Block-Richtung betragen.

Um das alternative Box-Modell für alle Ihre Elemente zu verwenden (was eine gängige Wahl unter Entwicklern ist), setzen Sie die box-sizing-Eigenschaft auf das <html>-Element und setzen alle anderen Elemente darauf, diesen Wert zu erben:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Um die zugrunde liegende Idee zu verstehen, können Sie den CSS Tricks-Artikel über box-sizing lesen.

Im folgenden Beispiel sehen Sie zwei Boxen. Beide haben eine Klasse von .box, die ihnen das gleiche width, height, margin, border und padding gibt. Der einzige Unterschied ist, dass die zweite Box so eingestellt ist, dass sie das alternative Box-Modell verwendet. Können Sie die Größe der zweiten Box ändern (indem Sie CSS zur .alternate-Klasse hinzufügen), um sie in Breite und Höhe an die erste Box anzupassen?

<div class="box">I use the standard box model.</div>
<div class="box alternate">I use the alternate box model.</div>

.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  width: 300px;
  height: 150px;
}

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

Ihre Browser-Entwickler-Tools können das Verständnis des Box-Modells erheblich erleichtern — sie können Ihnen die Größe des Elements sowie dessen Rand, Abstände und Rahmen zeigen. Das Inspizieren eines Elements auf diese Weise ist eine großartige Möglichkeit zu überprüfen, ob Ihre Box wirklich die Größe hat, die Sie denken!

Sie haben die Eigenschaften margin, padding und border bereits im obigen Beispiel gesehen. Die in diesem Beispiel verwendeten Eigenschaften sind Shorthands und erlauben es uns, alle vier Seiten der Box auf einmal festzulegen. Diese Shorthands haben auch entsprechende Langform-Eigenschaften, die die Steuerung der verschiedenen Seiten der Box einzeln ermöglichen.

Lassen Sie uns diese Eigenschaften genauer erkunden.

Der Rand ist ein unsichtbarer Raum um Ihre Box. Er drückt andere Elemente von der Box weg. Ränder können positive oder negative Werte haben. Wenn Sie eine negative Rand auf einer Seite Ihrer Box einstellen, kann es dazu führen, dass sie sich mit anderen Dingen auf der Seite überlappt. Egal, ob Sie das Standard- oder das alternative Box-Modell verwenden, der Rand wird immer nach der Größe der sichtbaren Box hinzugefügt.

Wir können alle Ränder eines Elements auf einmal mit der margin-Eigenschaft steuern oder jede Seite einzeln mit den entsprechenden Langform-Eigenschaften:

• margin-top
• margin-right
• margin-bottom
• margin-left

Im folgenden Beispiel versuchen Sie, die Randwerte zu ändern, um zu sehen, wie die Box durch den Rand verschoben wird oder Raum entfernt wird (wenn es ein negativer Rand ist) zwischen diesem Element und dem umgebenden Element.

<div class="container">
  <div class="box">Change my margin.</div>
</div>

.container {
  border: 5px solid blue;
  margin: 40px;
}

.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 10px;
  height: 100px;
  /* try changing the margin properties: */
  margin-top: -40px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 4em;
}

Zusammenfallen von Rändern

Abhängig davon, ob zwei Elemente, deren Ränder sich berühren, positive oder negative Ränder haben, sind die Ergebnisse unterschiedlich:

• Zwei positive Ränder werden kombiniert und zu einem Rand. Seine Größe entspricht dem größten einzelnen Rand.
• Zwei negative Ränder werden zusammenfallen und der kleinste (am weitesten von Null entfernt) Wert wird verwendet.
• Wenn ein Rand negativ ist, wird sein Wert von der Gesamtsumme subtrahiert.

Im folgenden Beispiel haben wir zwei Absätze. Der obere Absatz hat einen margin-bottom von 50 Pixeln, der andere einen margin-top von 30 Pixeln. Die Ränder sind zusammengefallen, sodass der tatsächliche Rand zwischen den Boxen 50 Pixel beträgt und nicht die Summe der beiden Ränder.

Sie können dies testen, indem Sie den margin-top des zweiten Absatzes auf 0 setzen. Der sichtbare Rand zwischen den beiden Absätzen ändert sich nicht — es behält die 50 Pixel bei, die im margin-bottom des ersten Absatzes gesetzt wurden. Wenn Sie ihn auf -10px setzen, sehen Sie, dass der Gesamtrand 40px beträgt — er wird von den 50px subtrahiert.

<div class="container">
  <p class="one">I am paragraph one.</p>
  <p class="two">I am paragraph two.</p>
</div>

.container {
  border: 5px solid blue;
  margin: 40px;
}

p {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 10px;
}
.one {
  margin-bottom: 50px;
}

.two {
  margin-top: 30px;
}

Eine Reihe von Regeln bestimmen, wann Ränder zusammenfallen und wann nicht. Für weitere Informationen siehe die detaillierte Seite zum Meistern des Zusammenfalls von Rändern. Das Wichtigste, das Sie sich merken sollten, ist, dass das Zusammenfallen von Rändern ein Phänomen ist, das passiert, wenn Sie mit Rändern Platz schaffen und nicht den Raum erhalten, den Sie erwarten.

Der Rahmen wird zwischen dem Rand und den Abständen einer Box gezeichnet. Wenn Sie das Standard-Box-Modell verwenden, wird die Größe des Rahmens zur width und height der Inhaltsbox hinzugefügt. Wenn Sie das alternative Box-Modell verwenden, dann wird die Inhaltsbox umso kleiner, je größer der Rahmen ist, da der Rahmen einen Teil der verfügbaren width und height des Element-Box beansprucht.

Zum Stylen von Rahmen gibt es eine Vielzahl von Eigenschaften — es gibt vier Rahmen, und jeder Rahmen hat einen Stil, eine Breite und eine Farbe, die wir manipulieren möchten.

Sie können die Breite, den Stil oder die Farbe aller vier Rahmen auf einmal mit der border-Eigenschaft festlegen.

Um die Eigenschaften jeder Seite einzeln festzulegen, verwenden Sie:

• border-top
• border-right
• border-bottom
• border-left

Um die Breite, den Stil oder die Farbe aller Seiten festzulegen, verwenden Sie:

• border-width
• border-style
• border-color

Um die Breite, den Stil oder die Farbe einer einzelnen Seite festzulegen, verwenden Sie eine der detaillierteren Langform-Eigenschaften:

• border-top-width
• border-top-style
• border-top-color
• border-right-width
• border-right-style
• border-right-color
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left-width
• border-left-style
• border-left-color

Im folgenden Beispiel haben wir verschiedene Shorthands und Langformen verwendet, um Rahmen zu erstellen. Spielen Sie mit den verschiedenen Eigenschaften, um zu testen, dass Sie verstehen, wie sie funktionieren. Die MDN-Seiten zu den Rahmeneigenschaften geben Ihnen Informationen über die verschiedenen verfügbaren Rahmenstile.

<div class="container">
  <div class="box">Change my borders.</div>
</div>

body {
  font-family: sans-serif;
}
.container {
  margin: 40px;
  padding: 20px;
  border-top: 5px dotted green;
  border-right: 1px solid black;
  border-bottom: 20px double rgb(23 45 145);
}

.box {
  padding: 20px;
  background-color: lightgray;
  border: 1px solid #333333;
  border-top-style: dotted;
  border-right-width: 20px;
  border-bottom-color: hotpink;
}

Die Abstände befinden sich zwischen dem Rahmen und dem Inhaltsbereich und werden verwendet, um den Inhalt vom Rahmen wegzuschieben. Im Gegensatz zu Rändern können Sie keine negativen Abstände haben. Jeder auf Ihr Element angewendete Hintergrund wird hinter den Abständen angezeigt.

Die padding-Eigenschaft steuert die Abstände auf allen Seiten eines Elements. Um jede Seite einzeln zu steuern, verwenden Sie diese Langform-Eigenschaften:

• padding-top
• padding-right
• padding-bottom
• padding-left

Im folgenden Beispiel können Sie die Werte für Abstände an der Klasse .box ändern, um zu sehen, dass dies ändert, wo der Text beginnt in Bezug auf die Box. Sie können auch die Abstände an der Klasse .container ändern, um Platz zwischen dem Container und der Box zu schaffen. Sie können die Abstände an jedem Element ändern, um Platz zwischen seinem Rahmen und was auch immer im Element ist, zu schaffen.

<div class="container">
  <div class="box">Change my padding.</div>
</div>

body {
  font-family: sans-serif;
}
.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding-top: 0;
  padding-right: 30px;
  padding-bottom: 40px;
  padding-left: 4em;
}

.container {
  border: 5px solid blue;
  margin: 40px;
  padding: 20px;
}

All das oben Genannte gilt vollständig für Block-Boxen. Einige der Eigenschaften können auch auf Inline-Boxen angewendet werden, wie die, die durch ein <span>-Element erstellt werden.

Im folgenden Beispiel haben wir ein <span> innerhalb eines Absatzes. Wir haben eine width, height, margin, border und padding darauf angewendet. Sie können sehen, dass Breite und Höhe ignoriert werden. Die oberen und unteren Ränder, Abstände und Rahmen werden berücksichtigt, ändern jedoch nicht die Beziehung anderen Inhalts zu unserer Inline-Box. Die Abstände und Rahmen überlappen andere Wörter im Absatz. Die linken und rechten Abstände, Ränder und Rahmen bewegen anderen Inhalt von der Box weg.

<p>
  I am a paragraph and this is a <span>span</span> inside that paragraph. A span
  is an inline element and so does not respect width and height.
</p>

body {
  font-family: sans-serif;
}
p {
  border: 2px solid rebeccapurple;
  width: 200px;
}
span {
  margin: 20px;
  padding: 20px;
  width: 80px;
  height: 150px;
  background-color: lightblue;
  border: 2px solid blue;
}

display: inline-block ist ein Spezialwert von display, der einen Mittelweg zwischen inline und block bietet. Verwenden Sie es, wenn Sie nicht möchten, dass ein Element in eine neue Zeile umbricht, aber möchten, dass es width und height respektiert und das Überlappen oben vermieden wird.

Ein Element mit display: inline-block tut einen Teil der Block-Dinge, die wir bereits kennen:

• Die Eigenschaften width und height werden berücksichtigt.
• padding, margin und border bewirken, dass andere Elemente von der Box weggeschoben werden.

Es bricht jedoch nicht in eine neue Zeile um und wird nur größer als sein Inhalt, wenn Sie explizit width und height hinzufügen.

Im nächsten Beispiel haben wir display: inline-block zu unserem <span>-Element hinzugefügt. Versuchen Sie, dies zu display: block zu ändern oder die Zeile komplett zu entfernen, um den Unterschied in den Anzeigemodellen zu sehen:

<p>
  I am a paragraph and this is a <span>span</span> inside that paragraph. A span
  is an inline element and so does not respect width and height.
</p>

body {
  font-family: sans-serif;
}
p {
  border: 2px solid rebeccapurple;
  width: 300px;
}

span {
  margin: 20px;
  padding: 20px;
  width: 80px;
  height: 50px;
  background-color: lightblue;
  border: 2px solid blue;
  display: inline-block;
}

Wo dies nützlich sein kann, ist, wenn Sie einem Link eine größere Trefferfläche geben möchten, indem Sie padding hinzufügen. <a> ist ein Inline-Element wie <span>; Sie können display: inline-block verwenden, um padding darauf zu setzen, wodurch es für einen Benutzer einfacher wird, den Link zu klicken.

Sie sehen dies ziemlich häufig in Navigationsleisten. Die folgende Navigation wird in einer Reihe mit Flexbox angezeigt und wir haben padding zum <a>-Element hinzugefügt, weil wir in der Lage sein möchten, die background-color zu ändern, wenn das <a> gehoben wird. Der Abstand scheint den Rahmen auf dem <ul>-Element zu überlappen. Dies liegt daran, dass das <a> ein Inline-Element ist.

Fügen Sie display: inline-block; zur Regel mit dem Selektor .links-list a hinzu, und Sie werden sehen, wie es dieses Problem löst, indem es bewirkt, dass der Abstand von anderen Elementen respektiert wird:

<nav>
  <ul class="links-list">
    <li><a href="">Link one</a></li>
    <li><a href="">Link two</a></li>
    <li><a href="">Link three</a></li>
  </ul>
</nav>

ul {
  font-family: sans-serif;
  display: flex;
  list-style: none;
  border: 1px solid #000;
}

li {
  margin: 5px;
}

.links-list a {
  background-color: rgb(179 57 81);
  color: #fff;
  text-decoration: none;
  padding: 1em 2em;
}

.links-list a:hover {
  background-color: rgb(66 28 40);
  color: #fff;
}

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sie finden weitere Tests, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihr Können: Das Box-Modell.

Das ist das meiste, was Sie über das Box-Modell wissen müssen. Möglicherweise möchten Sie zu dieser Lektion zurückkehren, wenn Sie jemals verwirrt darüber sind, wie groß Boxen in Ihrem Layout sind.

Im nächsten Artikel werden wir uns ansehen, wie CSS Konflikte behandelt — wenn mehrere Regeln dasselbe Element auswählen, welche Stile werden dann angewendet?

• Zurück
• Übersicht: Grundlagen der CSS-Stilgestaltung
• Weiter