Boxmodell

Was vielen nicht bewusst ist: HTML ist von Haus aus responsiv - Block-Elemente wie Überschriften oder Absätze nehmen die gesamte Breite des Viewports ein und brechen überstehenden Text um, sodass er nach unten in einer neuen Zeile dargestellt wird.

Mit CSS können Sie jedoch Größenangaben und Abstände festlegen. Was auf unserem Symbolbild wie ein Unfall aussieht, zeigt eigentlich nur, wie viele Möglichkeiten CSS bietet.

• 

  „klassisches“ Boxmodell
  • „alternatives“ Boxmodell
    box-sizing
  • „logisches“ Boxmodell
   
• 

  Größenangaben
  • px, em und rem
  • vw, vh und dvh
  • intrinsische Werte
   
• 

  übergroßer Inhalt
  • overflow
  • text-overflow
  • scroll
   

Das „klassische“ Boxmodell

30min

einfach

Einstieg in CSS

Mit CSS kann man die Größe und Abstände von Elementen festlegen und bestimmen, wie diese auf der Seite angeordnet werden.

Damit der Browser eine Webseite darstellen kann, werden HTML-Elemente als rechteckige Bereiche (Boxen) betrachtet. Diese Boxen folgen einem festen Aufbau: dem Box-Modell.

Im CSS-Einstieg haben wir Überschriften oft eine Text-und Hintergrundfarbe zugewiesen:

Jedes Element ist eine Box (fast jedes) ansehen …

p {
	margin: 30px;
	border: 10px solid steelblue;
	padding: 10px;
	background: #efd68f;
}

.box {
	width: 200px;
	margin: 20px auto;
	padding: 60px;
	text-align: center;
}

Im Beispiel erhalten die Textabsätze einige CSS-Eigenschaften:

• border: 10px solid steelblue; erzeugt einen blauen Rahmen.
  Der Rahmen umschließt Inhalt und Padding und macht so die Begrenzung der Box sichtbar.
• padding (engl. für Polsterung) erzeugt einen Innenabstand zwischen Inhalt und Rahmen.
• background markiert den Bereich innerhalb des Rahmens (Inhalt plus Padding) durch die gelbe Hintergrundfarbe
• margin legt fest, dass diese Box in allen Richtungen mindestens den angebenen Abstand zur Border-Box (siehe unten) anderer Boxen halten soll (es gibt diverse Gründe, warum es mehr werden kann).

Diese vier Bereiche haben in CSS eigene Namen. Zusammen bilden sie das Box-Modell. Die einzelnen Rechtecke werden von innen nach außen bezeichnet als

• Content Box: (Inhaltsbox) Der Bereich für den Inhalt des Elements. Seine Größe kann durch die Eigenschaften width und height, durch den Inhalt selbst oder durch Eigenschaften des Elternelement festgelegt werden.
• Padding Box: (Polsterungsbox) Der Bereich, der durch Inhalt und Innenabstand belegt wird. Besitzt eine Seite keinen Innenabstand, so sind Polsterungsbox und Innenbox identisch.
• Border Box: (Rahmenbox) Der Bereich, der durch Inhalt, Padding und Rahmen belegt wird. Besitzt eine Box keinen Rahmen, so ist die Rahmenbox mit der Polsterungsbox identisch.
• Margin Box: Box mitsamt den durch margin festgelegten Außenabständen. Sind für eine Box keine Außenabstände definiert, so ist die Außenkante mit der Rahmenkante identisch.

Diese Bezeichnungen finden sich als Werte für einige Eigenschaften wieder, etwa box-sizing, background-clip, background-origin oder mask.

Beachte: Der Begriff „Box“ ist nicht mit dem Begriff „Element“ gleichzusetzen. Nicht jedes Element erzeugt eine Box, aber Boxen können auch erzeugt werden, wenn in einem Dokument kein Element als direktes Gegenstück existiert.

Die Bereiche einer Box

Das folgende Beispiel visualisiert die Bereiche einer Box mit HTML- und CSS-Mitteln.

Die Bereiche einer Box ansehen …

p {
	margin: 2em;
	border: 10px solid steelblue;
	padding: 10px;
	background-color: #f2dea6;  /* padding area */
}

.box {
	margin: 20px auto;
	width: 200px;
	height: 50px;
}

.box .content {
	display: inline-block;      /* nötig, damit span width und height akzeptiert */
	width: 100%;
    height: 100%;
	background-color: #641702;        /* visualisiert content-box */
	color: white;
}

Für die Visualisierung wurde der .box Absatz …

• durch width: 200px und height: 50px auf eine feste Größe gesetzt
• durch margin vertikal auf Abstand gebracht (20px) und horizontal zentriert (auto)
• durch padding mit Innenabstand versehen
• durch background-color im Padding- und Inhaltsbereich eingefärbt

Zusätzlich wurde der Inhalt durch einen span mit der Klasse content eingefasst, um den Inhaltsbereich visuell hervorheben zu können. Dieser span wird durch die Angabe von 100% für width und height auf die Größe der Inhaltsbox des Elternelements gebracht und durch seinen Kontrast erkennbar gemacht.

Eine häufige Frage lautet: Soll ich für den Abstand padding oder margin verwenden?

Die Antwort hängt davon ab, wo der Abstand entstehen soll:

• Padding erzeugt Abstand innerhalb einer Box – zwischen Inhalt und Rahmen. Der Hintergrund der Box wird auch in diesem Bereich angezeigt.
• Margin erzeugt Abstand außerhalb einer Box – zwischen dieser und anderen Elementen. Der Hintergrund der Box erstreckt sich nicht in diesen Bereich.
  Wichtig: Margins können sich überlappen (→ Collapsing margins).

Wie breit ist unsere Box eigentlich? ansehen …

p {
	border: 10px solid steelblue;
	padding: 10px;
}

.box {
	width: 200px;
}

Wie im oben gezeigten Beispiel demonstriert, werden im Box-Modell alle Bestandteile einer Box addiert. Die Gesamtbreite errechnet sich aus:

border-left + padding-left + width + padding-right + border-right

Die Gesamthöhe einer Box wird ebenso errechnet.

Für den Platz, den eine Box belegt, kann auch noch der zugewiesene margin relevant sein. Aber weil Ränder sich überlappen können und auch nicht immer verwendet werden, zählen der Margin bei der Berechnung der eigentlichen Box-Größe nicht mit.

Das „alternative“ Boxmodell

Ursprünglich entstand der Wunsch nach einem alternativen Box-Modell durch unterschiedliche Berechnungen verschiedener Browser. In der Praxis ist es oft einfacher, eine feste Gesamtbreite einer Box anzugeben, statt die Breite des Inhaltsbereichs zu berechnen. Der Klassiker ist die Angabe von width:100% für ein input-Element, das ein div ausfüllen soll und dann über das div hinausragt, weil ein input-Element vom Browser aus Border und Padding bekommt.

Mit box-sizing: border-box kann dieses Verhalten heute standardkonform aktiviert werden: Die angegebene Breite umfasst dann Inhalt, Padding und Border.

Der exakten Limitierung eines input-Elements auf die Breite seines Elternelements steht damit nichts mehr im Weg.

Größenangaben mit border-box

.eingaben {
	padding: 0.5em 1em;
	width: 30em;
}
.eingaben input[type=text] {
	box-sizing: border-box;
	width: 100%;
}

Das Element mit der Klasse eingaben könnte zum Beispiel ein fieldset sein, das das input-Element enthält. Durch das border-box-Modell zieht der Browser automatisch Rand und Padding des input-Elementes von den 100% der Breite ab und das Element passt sich exakt an.

content-box oder border-box? ansehen …

section {
  border: 1em solid green;
  padding: 1em;
  width: 20em;
}
#content-box {
  box-sizing: content-box;
}
#border-box {
  box-sizing: border-box;
}

<section id="content-box">
  ...
</section>
<section id="border-box">
  ...
</section>

Dieses Beispiel enthält zwei section-Elemente die jeweils einen Rahmen und einen Innenabstand der Breite 1em haben. Ebenso haben beide eine Breite von 20em zugewiesen bekommen.

Beim ersten section-Element wird eine Inhaltsbreite von 20em festgelegt, beim zweiten Element ergeben sich die 20em als Summe der Breiten von Inhalt, Innenabstand und Rahmen.

Beachten Sie: Als box-sizing-Modell können nur content-box und border-box angegeben werden. Die Angabe von padding-box ist hier nicht möglich – und die Margin Box ist lediglich ein Konzept und kann in keiner CSS-Eigenschaft verwendet werden.

Block- und Inline-Elemente

Nicht jedes HTML-Element erzeugt dieselbe Art von Box. Je nach display-Eigenschaft verhält sich eine Box unterschiedlich im Dokumentfluss. Die drei wichtigsten Grundformen sind Block-Elemente, Inline-Elemente und Inline-Block-Elemente.

Block-Elemente erzeugen eine eigene Zeile und nehmen standardmäßig die verfügbare Breite ein. Eigenschaften wie width, height, padding und margin wirken in alle Richtungen.

Beispiele für Block-Elemente

<div>Block-Element</div>
  <h1>Überschrift</</h1>
  <p>Absatz</p>

Inline-Elemente bleiben dagegen im Textfluss und nehmen nur so viel Platz ein, wie ihr Inhalt benötigt. Sie erzeugen keine eigene Zeile. Eigenschaften wie width und height haben bei normalen Inline-Elementen keine Wirkung.

Beispiele für Inline-Elemente

  Dies ist ein Absatz, in dem sich ein 
  <span>Inline-Element</span>
  und ein 
  <a>Link</a>
  befinden.

Dieses Wissen ist eine wichtige Grundlage für das Verständnis des CSS-Boxmodells, da viele Eigenschaften davon abhängen, welche Art von Box ein Element erzeugt.

Warum man manchmal inline-block benötigt

Inline-Block-Elemente verbinden beide Verhaltensweisen: Sie bleiben im Textfluss wie Inline-Elemente, bilden aber eine eigene Box, deren Größe mit width und height kontrolliert werden kann.

Normale Inline-Elemente wie <span> oder <a> erzeugen keine transformierbare Box, wie dies bei Block-Elementen der Fall ist.

Warum lässt sich der span nicht drehen?

<span>Schwebender Text</span>

span {
    transform: rotate(20deg);
}

Die Transformation hat keine Wirkung, da <span> ein nicht ersetztes Inline-Element ist.

Soll das Element transformiert werden, kann es in ein „inline-block“-Element umgewandelt werden:

So funktioniert es!

<span>Schwebender Text</span>

span {
    display: inline-block;
    transform: rotate(20deg);
}

Nun erzeugt das Element eine eigene Box und kann transformiert werden.

Siehe auch

• display
  • Elementfluss
  • Block oder inline?
    - inline-block!
  • Zusammenwirkung von display, float und position
   

Praktischer Einsatz heute

Um die Jahrtausendwende mussten WebDesigner mit Papier und Bleistift Breiten und Abstände zusammenrechnen, um pixelgenaue Layouts (fixed width layouts) für eine feste Größe von 640x480px (später auch 1024x768px) zu erstellen.
Dabei war ein grundlegendes Verständnis des Boxmodells unumgänglich.

Heute bieten die Browser mit Flexbox- und Grid Layout Techniken an, mit man sein Layout flexibel an die Abmessungen des Anzeigebereichs anpassen kann, ohne selbst rechnen zu müssen.
Aber auch bei Flexbox und Grid gilt weiterhin das Box-Modell. Die Layout-Systeme nehmen uns jedoch viele manuelle Berechnungen ab.

Empfehlung:

• Verzichte auf den Versuch ein pixelgenaues Layout erzeugen zu wollen.
  • Verzichte auf Höhenangaben. Wenn der Inhalt größer wird, setzt er sich automatisch nach unten fort.
  • Verzichte auf feste Breitenangaben. Verwende Eigenschaften wie min-width, um sicherzustellen, dass das Element breit genug für den Inhalt ist.
• Verwende moderne, responsive Layout-Modelle wie Flexbox oder Grid Layout.
  Sie sind für alle Viewports geeignet und passen sich flexibel an den verfügbaren Platz an.
• Normalisiere im Sinne einer guten Wartbarkeit des CSS-Codes mit border-box und verzichte auf verschiedene Werte von box-sizing innerhalb eines Dokuments.

Die Eigenschaft box-sizing wird nicht automatisch vererbt. Deshalb schlug Chris Coyier vor, für die box-sizing Eigenschaft global den Wert inherit festzulegen.

Miriam Suzanne widerspach diesem Ansatz auf der 2018er beyond tellerand Konferenz und empfahl, auf die Vererbung zu verzichten und einfach bei allen Elementen den Wert für box-sizing festzulegen:

There’s a reason that box model doesn’t inherit by default, and there’s no reason that it should inherit. We don’t inherit margins, we don’t inherit borders. Layouts should not be inherited; layouts don’t nest in that way. So I don’t recommend this solution.

Es gibt einen Grund, weshalb das Boxmodell nicht per Default vererbt wird, und es gibt keinen Grund, dass es vererbt werden sollte. Wir erben keine Margins, wir erben keine Borders. Layouts sollten nicht vererbt werden, Layouts schachteln sich nicht auf diese Art. Also, diese Lösung empfehle ich nicht.

Miriam Suzanne: Don’t use my grid system or any others (ab 8:15)

Normalisierung von box-sizing

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

Die Eigenschaft box-sizing wird für alle Elemente auf border-box gestellt.

Logische Eigenschaften

Feinetuning der vier Seiten

Innen- und Außenabstände sowie Rahmen können für jede der vier Seiten einer Box einzeln festgelegt werden. Dafür gibt es Eigenschaften wie margin-left, padding-top oder border-bottom. Häufig werden jedoch Kurzschreibweisen verwendet:

padding: 1em 2em 3em 4em;

Die Reihenfolge lautet: oben, rechts, unten, links. (wie bei einer Uhr oben anfangen und rechts, unten nach links gehen)

Eine häufige Schreibweise ist:

margin: 0 auto;

Der Wert 0 für oben/unten, automatisch für links/rechts
Damit wird ein Block-Element horizontal zentriert (z.B. im oberen Beispiel).

---

Eigenschaften wie margin-left oder padding-right beziehen sich auf feste Seiten einer Box. Das funktioniert gut für Sprachen, die von links nach rechts geschrieben werden.

CSS wird jedoch weltweit eingesetzt. In manchen Sprachen verläuft der Text von rechts nach links, und in einigen Schriftsystemen sogar von oben nach unten. Dann entsprechen »links« und »rechts« nicht mehr der Schreibrichtung.

unterschiedliche Schreibrichtungen ansehen …

<html lang="de">
  ...
<section>
    <h2>Webdesign</h2>
    <p>Mit CSS können Sie Webseiten gestalten!</p>
</section>
    
<section dir="rtl" lang="ar">
    <h2>تصميم المواقع</h2>
    <p>يمكنك تصميم مواقع الويب باستخدام CSS!</p>
</section>

Unser Beispiel besteht aus mehreren section-Elementen in verschiedenen Sprachen, die einen linken Rand erhalten sollen.

Um das HTML für Screenreader (vor)-lesbar zu machen, wurde eine lang-Sprachangabe und im Falle des Arabischen auch eine Angabe mit dem dir-Attribut für die Schreibrichtung gemacht.

Beispiel

section {
    border-left: thick solid #c32e04;
    padding-left: 1em;
    width: 25em;
}

[lang=ja] {
    writing-mode: vertical-rl;
}

Jede section erhält mit border-left einen linken Rand, der mit padding-left vom Text abgerückt wird.

Allerdings ist er beim arabischen Text mit Schreibrichtung von rechts nach links nun auf der falschen Seite. Deshalb wird dieser Text mit section[dir=rtl] selektiert, die bisherigen Einstellungen normalisiert und der Rand nach rechts gesetzt.
Das Beispiel in Japanisch wird über seine Sprachangabe mit dem Attributwert-Selektor ausgewählt und mit writing-mode: vertical-rl von oben nach unten und von rechts nach links ausgegeben.

Beispiel

section[dir=rtl] {
    border-left: none;
    padding-left: 0;    
    border-right: thick solid #c32e04;
    padding-right: 1em;        
}

Es wäre also wünschenswert, CSS-Eigenschaften zu haben, die den Anfang eines Texts (oder Elements) unabhängig von der Schreibrichtung formatieren können.

Eine Eigenschaft für unterschiedliche Schreibrichtungen ansehen …

section {
    border-inline-start: thick solid #c32e04;
    padding-inline-start: 1em;
    inline-size: 25em;
}

Anstelle der Angaben von rechts oder links verwenden wir nun den Begriff inline, bzw. inline-start.

• inline-size entspricht bei horizontalen Schriften der width, bei vertikalen Schriften der height.
• border-inline-start fügt einen Rahmen am Beginn des Textflusses hinzu;
• padding-inline-start fügt einen Innenabstand am Beginn des Textflusses hinzu

Das „logische“ Boxmodell

Während sich physische Eigenschaften an der Darstellung am Bildschirm orientieren, richten sich die logischen Eigenschaften an der Schreibrichtung aus. Analog zu den bei Flexbox- und Grid-Layout eingeführten Achsen spricht man nun von der Block-Richtung und der Inline-Richtung, und ebenso analog sind die Begriffe Start und End für die beiden Seiten der jeweiligen Richtung. Sie ergänzen das „klassische“ Boxmodell.

Eine vollständige Liste findet sich in der MDN logischen Maße

Um zu entscheiden, welche Achse in welcher Richtung verläuft, zieht der Browser die Werte der Eigenschaften writing-mode, direction und text-orientation heran.

Wenn man nur an europäische Sprachen und Schriften denkt, mag dies umständlicher und länger als das bisher gewohnte Boxmodell scheinen. Bei arabischen, hebräischen oder chinesischen Texten sieht die Sache anders aus. Für einen Chinesen ist die Inline-Richtung vertikal und zeigt nach unten - womit inline-start identisch mit top ist, für einen Araber oder Israeli ist die Inline-Richtung zwar horizontal, zeigt aber nach links, so dass inline-start dem physischen right entspricht. Natürlich kann es auch für ein chinesisches oder arabisches Dokument sinnvoll sein, bestimmte Angaben durch top oder left vorzunehmen, aber vor allem dann, wenn die Sprachauswahl der Webseite Sprachen mit unterschiedlichen Schreibrichtungen vorsieht, ist die Option, an den richtigen Stellen auf die korrekte Block- oder Inline-Richtung Bezug nehmen zu können, nützlich.

Ein weiterer Vorteil der logischen Eigenschaften ist, dass es neue Shorthand-Eigenschaften gibt, die die Angaben für eine der beiden Achsen zusammenfassen, so dass man beispielsweise Margin oder Padding in einer Achse mit einer einzigen Angabe festlegen kann, ohne den Wert für die andere Achse zu beeinflussen.

Zentrieren mit margin-inline

Für das horizontale Zentrieren benötigt man entweder zwei Regelsätze für margin-left und margin-right oder eine zusammenfassende Regel wie margin: 0 auto;. Dabei muss man aber immer einen passenden Wert für die vertikalen Abstände ermitteln und angeben.

Buttons einrücken und vertikal zentrieren ansehen …

.inset button {
    position: relative;
    inset-inline: 2em;
}
  
.margin button {
    margin-inline: auto;
}

div button {
    display: block;
    padding-inline: 1.5em;
    padding-block: .5em;
    margin-block-end: 0.3em;
}

Die unteren Buttons werden mit margin-inline mittig zentriert - ein eventueller Abstand in Blockrichtung wird nicht gesetzt.

Die oberen Buttons erhalten mit inset-inline eine Einrückung. Diese benötigt eine Positionierung mit position. Auch die paddings der Buttons werden mit entsprechenden logischen Eigenschaften formatiert.

Randlinien - block oder inline

Block oder inline ansehen …

p {
    inline-size: max-content;
    padding-inline: 2em;
    padding-block: 1em;
}

.border-block {
    border-block: thick solid #c32e04;
}

.border-inline {
    border-inline: thick solid #337599;
}

Anstatt in physikalischen Begriffen wie rechts und links zu denken, stellen wir uns eine "Inline"-Richtung und eine "Block"-Richtung vor.

Ollie Williams: CSS Logical Properties and Values

Absolute Positionierung mit inset-inline

In CSS benutzt man oft top: 0 und left: 0, um ein Element oben links zu platzieren. Das funktioniert gut, solange die Seite von links nach rechts geschrieben wird (wie Deutsch oder Englisch).

In Sprachen mit anderer Schreibrichtung wie Arabisch ist „links“ oder „oben“ nicht mehr die richtige Position.

Stattdessen solltest du logische CSS-Eigenschaften verwenden:

• inset-inline-start statt left
• inset-inline-end statt right
• inset-block-start statt top
• inset-block-end statt bottom

Diese passen sich automatisch an die Schreibrichtung an.

Absolute Positionierung mit inset-inline ansehen …

    .box {
      position: relative;
      margin-block-end: 1em;
    }

    .badge {
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      background: red;
      color: white;
    }

    .message {
      position: relative;
    }

    .timestamp {
      position: absolute;
      inset-inline-end: 0.5em;
      inset-block-end: 0.5em;
    }

Die absolute Positionierung der Badge und des Timestamps richten sich je nach Schreibrichtung automatisch rechts oder links am Ende des Blocks aus.

Fazit

Die logischen Eigenschaften erweitern die Toolbox zur Gestaltung von Webseiten. Wie unten in den Weblinks zu sehen ist, haben hauptsächlich Autoren, die arabische und hebräische Texte veröffentlichen, den Nutzen dieser Eigenschaften erkannt.

Bei neuen Projekten können sie verwendet werden - in bestehenden, einsprachigen Projekten gibt es aber keine Notwendigkeit an der Formatierung herumzuschrauben.

Siehe auch

• Außen- und Innenabstand
  • zusammenfallende Außenabstände
    

  (collapsing margins)

  • padding
   
• Rahmen und Ribbons
  • Wichtiges mit Rahmen hervorheben
  • Ribbons (Hintergrundbänder)
  • box-shadow und filter
   

• Box-Model-Bug und Quirks Mode

Weblinks

Quellen

---

• css-tricks: CSS Logical Properties and Values von Ollie Williams, 27.07.2021
  Mit vielen Screenshots von Webseiten mit vertikaler Schreibrichtung
• medium.com: New CSS Logical Properties!
  The Next Step of CSS Evolution von Elad Shechter
• Digging Into CSS Logical Properties von Ahmad Shadeed, 10 Mar 2021
  mit sehr guten Visualisierungen