Das CSS Box-Modell

Das Box-Model gilt für alle HTML-Tags, die Block-Elemente sind. Für jedes Block-Element einer Seite wird nach den CSS-Regeln ein rechteckiger Bereich reserviert. Laut Spezifikation des W3C-Konsortiums besteht eine Box aus folgenden Elementen:

Abbildung soll das Box-Modell veranschaulichen!
Quelle: W3Schools.com 
div {
    width: 300px;
    padding: 25px;
    border: 25px solid #ff0000;
    margin: 25px;
}

In diesem Beispiel erhalten wir nun eine Box mit einer Breite von 450px, (margin:left + border-left-width + padding:left + content + padding:right + border-right-width + margin:right). Die Höhe ist dynamisch, weil kein height definiert ist.

Zusammenfallende Abstände

 h3 { margin: 20pt 0; }
 p { margin: 12pt 0; }

<h3>Überschrift</h3>
<p>Absatz Eins</p>
<p>Absatz Zwei</p>

In diesem Beispiel könnte man denken, dass zwischen der Überschrift und dem ersten Absatz ein Abstand von 32px besteht. Zwischen dem ersten und zweiten Absatz erwartet man einen Abstand von 24px. Ist aber nicht so. Dieses Verhalten nennt man zusammenfallende Abstände (collapsing margins). Als tatsächlicher Abstand wird der Größte von beiden Werten (margins) verwendet, auch negative margins sind möglich!

Regeln für Zusammenfallende Abstände

  • horizontale margins (links und rechts) fallen nicht zusammen
  • vertikale margins die direkt untereinander stehen fallen zusammen (Ausnahme sind margins vom Wurzelelement html)
  • nur margins von statisch positionierten Elementen fallen zusammen
  • margins mit einem anderen Wert für overflow als visible fallen mit Kindboxen nicht zusammen
  • floats, inline-Blöcke bzw. absolut oder relativ positionierte Elemente fallen nicht zusammen
  • oberer margin einer Box und oberer margin der ersten Kind-Box fallen zusammen
  • unterer margin einer Box und unterer margin der letzten Kind-Box fallen zusammen

Alternatives Box-Modell (box-sizing)

Mit box-sizing kann man für seine Elemente ein alternatives Boxmodel aktivieren. Im herkömmlichen Box-Modell definiert width und height die Größe vom Content. Mit box-sizing ist diese Verhalten Änderbar.

Eigenschaft Bedeutung Mögliche Werte
box-sizing Gültigkeitsbereich für Breiten- und Höhenangaben einer Box content-box, padding-box, border-box, initial, Inherit

box-sizing

Sollen die Ausmaße von einer Box den Content beschreiben, oder soll padding mitgerechnet werden. Als dritte Option kann auch noch die Rahmenbreite includiert werden. Das sind die wesentlichen Attributwerte von box-sizing, wobei padding-box noch nicht von den Browsern unterstützt wird, box-sizing-Attribute sind nicht vererbbar.

Mögliche Werte von box-sizing

  • content-box: Standardwert, gilt nur für den Content
  • padding-box: gilt noch als experimentiell, gilt für den Content + padding
  • border-box: gilt für den Content + padding + border-width
p { 
  width: 400px;
  padding: 25px;
  border: 25px solid #ff0000;
  box-sizing: border-box; 
}

Außenlinie (Outline)

Eine Außenlinie ist eine Linie, die um Elemente außerhalb von Border gezeichnet wird. Eine Außenlinie wird mit der Eigenschaft outline gezeichnet. Outline ist nicht Teil der Dimension des Elements, also Breite und Höhe des Elements enthalten nicht die Breite von Outlines.

Eigenschaft Bedeutung Mögliche Werte
outline-color Außenlinie Farbe Farbangaben, initial, Inherit
outline-style Linienart none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit
outline-width Linienstärke thin, medium, thick, Längenangabe, initial, inherit
outline Zusammenfassung outline-color outline-style outline-width

outline-Eigenschaft

Outline Eigenschaften können einzeln oder als Zusammenfassung geschrieben werden. Die Reihenfolge spielt dabei keine Rolle. Die Dicke der outline wird nicht zur Elementgröße hinzugerechnet, sondern nimmt den Platz rundherum ein. Im Beispiel bekommen alle p-Element einen Rahmen plus Außenlinie. 

p {
  border: 1px solid red;
  outline: green dotted thick;
}