CSS, HTML und Javascript mit {stil}

CSS Box-Modell und box-sizing: border-box

CSS Box Model: padding, margin, border

Das Box-Modell ist die Grundlage für das grafische Layout und die Berechnung der Dimensionen von Elementen mit CSS. Jedes HTML-Element – gleich ob body, div, p, table, a oder span – wird im Box-Modell als rechteckige Box betrachtet.

Die einfache Angabe der Breite allein reicht allerdings nicht, um den Raum für ein Layout-Element zu berechnen.

Das Box-Modell gibt einen flexiblen Spielraum für das Layout von Webseiten, aber das Box-Modell und seine Regeln sind keineswegs intuitiv.

Jedes Block-Element (div, p, table, …) dehnt sich über die gesamte Breite der umfassenden Box aus, wenn width für das Element nicht angegeben ist. Inline-Elemente wie a, span und strong nehmen innerhalb der umfassenden Box genau den Platz für ihren Inhalt ein.

box-modell-2017

Ein funktionierendes Layout erfordert die akurate Berechnung der Dimensionen der Boxen. Das ist komplizierter als es auf den ersten Blick wirkt.

Ein Text in einem p-Tag fließt so breit wie das div-Tag, in dem das p-Tag liegt. Das div-Tag ist 400px breit: Das p-Tag bildet darum eine Box von 400px Breite. Ein a-Tag innerhalb des p-Tags bildet eine Box, die genauso groß ist wie ihr Text.

  
<div style="background-color: yellow; width: 300px;">
   <p style="background-color: blue"> … <a 
      … 
      style="background-color:gray;color:white;">… </a> 
   </p>
</div>

Regel 1: Volle Breite

Ohne die Angabe einer Breite nimmt eine Box immer die volle Breite der umfassenden Box ein.

Hier ist auch eine Inline-Box eingebettet.

Der gelbe Hintergrund des div-Tags ist nicht sichtbar, denn die Box für das p-Tag nimmt ohne margin oder Breitenangabe den vollen Raum des div-Blocks ein.

Regel 2: padding und border erweitern den Raum der Box

Die Breite von padding und border wird zur Breite der Box hinzugerechnet.

Wird für das p-Tag border oder padding angegeben, dann addieren sich die Angaben für border und padding zur Breite der p-Box. Aber die Box für p nimmt weiterhin genau denselben Raum innerhalb der div-Box ein.

Ein Text in einem p-Tag fließt so breit wie das div-Tag, in dem das p-Tag liegt. Das div-Tag ist 400px breit: Das p-Tag bildet darum eine Box von 400px Breite. Ein a-Tag innerhalb des p-Tags bildet eine Box, die genauso groß ist wie ihr Text.

Regel 3: margin verkleinert den Raum

Wird für das p-Tag margin – ein Abstand zur umfassenden Box – angegeben, wird der Hintergrund des umfassenden Blocks sichtbar.

Der Text im p-Block hält jetzt einen Abstand von 50px vom rechten Rand der umfassenden div-Box:
<p style="margin-right:50px;"> …

margin ist umstritten: Die einen sagen, margin gehört zur Breite des Elements, andere sagen, margin gehört nicht zur Breite des Elements. Auf jeden Fall aber können wir jetzt berechnen, wie breit der Text nun läuft:

400px - 2 x 5px border - 2 x 10px padding - 50px margin = 320px

Regel 4: Übergroße Boxen dehnen die umfassende Box

Komplizierter wird es, wenn eine Box in einer Box die Maße der umgebenden Box sprengt.

Die p-Box in der div-Box ist jetzt 500px breit. Dazu kommen border und padding und am Ende auch noch der Abstand zur rechten Seite: margin.

Die umfassende Box – das div-Tag – wird jetzt über seine Breite von 400px hinaus ausgedehnt, damit die übergroße p-Box hineinpasst.

Regel 5: Bei Übergrößen kollabiert margin

Die übergroße Box dehnt die umfassende Box aus, aber der Abstand margin kollabiert dabei. Darum ist der gelbe Hintergrund der div-Box nicht mehr sichtbar.

box-sizing: border-box

CSS box-sizing macht alles viel einfacher und sorgt dafür, dass Elemente in den vorgesehen Raum passen, ohne dass wir uns mit margin, padding und border herumschlagen müssen.

Für einen HTML-Block – z.B. ein div – wird box-sizing als border-box notiert. Das zwingt den Browser, den kompletten Block innerhalb der angegebenen Breite zu rendern. padding und border werden innerhalb der Box gerendert.

.box { 
   box-sizing:border-box; 
   width: 49%;
   border:4px solid white; 
   padding: 10px;
}
Eine Box mit padding und border, 49% Breite
Eine Box mit padding und border, 49% Breite