CSS Box-Modell

Alle Elemente nehmen auf Websites einen Platz in Form eines Rechtecks ein, die auch einfach Boxen genannt werden. Dabei wird das Aussehen der Website neben den Farben und Bildern bzw. Hintergrundbildern maßgeblich von der Positionierung der Elemente bestimmt. Das Standardverhalten der Boxen ist bei Block- und Inline-Elementen unterschiedlich. Den Elementen können außerdem die folgenden Eigenschaften zugewiesen werden.

  • padding (Innenabstand)
  • border (Rahmen)
  • margin (Abstand zu benachbarten Elementen)

Diese Eigenschaften wirken sich bei Block- und Inline-Elementen ebenfalls unterschiedlich aus. Wird für ein Block-Element eine Breite vorgegeben, so unterscheidet es sich vom Standardverhalten und man muss gemäß der CSS-Spezifikation die Eigenschaften padding und border bei der Berechnung zur Boxgröße hinzuzählen. Die Eigenschaft margin wird nicht zur Größe der Box hinzugezählt, da damit nur die Abstände zu benachbarten Elementen festgelegt wird. Es hat jedoch einen Einfluss auf den Platz, der durch die Box in Anspruch genommen wird. Alle drei Eigenschaften haben somit einen Einfluss auf die Positionierung der Elemente, denen sie zugewiesen wurden sowie den benachbarten Elementen.

Um das Verständnis für die Größe der Boxen zu veranschaulichen, denen eine Breite zugewiesen wurde, ist ein sogenanntes CSS Box-Modell entwickelt worden. Damit wird beschrieben, aus welchen Bestandteilen sich die Größe einer Box zusammensetzt. Mit der Entwicklung von CSS3 wurde das Box-Modell weiterentwickelt und es wurde ein alternatives Box-Modell entworfen, das über die Eigenschaft box-sizing verwendet werden kann. Mit CSS3 wurde außerdem mit calc() eine Möglichkeit bereitgestellt, mit der man Größenangaben über Berechnungen angeben kann. Für Website-Entwickler sind daher folgende Themen relevant.

Standardverhalten der Block-Elemente ohne Breitenangabe

Fügt man auf eine Website ein Block-Element hinzu, dann nimmt die Box die gesamte Breite des verfügbaren Bereichs ein und die Höhe richtet sich nach dem Inhalt. Wenn man der Box einen Innenabstand (padding) und/oder einen Rahmen (border) zuweist, dann verbreitert sich die Box nicht. Weist man der Box Außenabstände (margin) zu, dann fallen die Abstände links und rechts in den verfügbaren Bereich hinein und die Box wird verkleinert.

Durch padding und border ändert sich jedoch die Höhe und die nachfolgenden Elemente verschieben sich dadurch nach unten. Ein margin sorgt oben und unten dafür, dass das Element selbst und die nachfolgenden Elemente nach unten verschoben werden.

Fügt man nacheinander mehrere Block-Elemente ohne Breitenangabe hinzu, so werden sie untereinander positioniert. Dabei fallen die Außenabstände (margin) zwischen dem oberen und unteren Block-Element zusammen, was collapsing-margin genannt wird (zusammenfallende Außenabstände). Es entsteht somit ein gemeinsamer Zwischenraum, der die beiden Boxen voneinander trennt. Hierbei gilt das größere Maß, falls den Elementen unterschiedliche Außenabstände zugewiesen wurden.

Abstände bei Block-Elementen ohne Breitenangabe

Box-Modell für Block-Elemente

Wird dem Block-Element über die Eigenschaft width eine Breite zugewiesen, dann ändert sich das Verhalten der Box. In dem Fall wird der Platz für die Box rundherum vergrößert, da die drei Eigenschaften außerhalb der Box platziert werden. Evtl. rechts neben der Box positionierte Elemente verschieben sich dadurch weiter nach rechts und die darunter liegenden Elemente verschieben sich wie bei der Variante ohne Breitenangabe nach unten. Für die Berechnung der Breite und Höhe, den die Box mitsamt der drei Eigenschaften einnimmt, gilt das nachfolgend abgebildete Box-Modell.

Die Breite, die die Box einnimmt, resultiert aus:

  • width + padding-left + padding-right + border-left + border-right +margin-left + margin-right

Die Höhe, die die Box einnimmt, resultiert aus:

  • height + padding-top + padding-bottom + border-top + border-bottom +margin-top + margin-bottom

Wurde der Box keine Höhe zugewiesen, wird für die Berechnung statt height die Höhe herangezogen, die sich durch den Inhalt ergibt. Wurde der Box nur eine Höhe zugewiesen, verhält es sich wie beim Standardverhalten ohne Breitenangabe. Da standardmäßig mit width und height lediglich die Größe des Inhaltsbereichs angegeben wird und die übrigen Eigenschaften hinzu addiert werden, nennt man sie auch Content-Box.

CSS Box-Modell

Verhalten der Block-Elemente bei Angabe einer Breite, ohne umfließende Elemente

Fügt man den Boxen lediglich eine Breite hinzu, werden sie wie beim Standardverhalten untereinander positioniert und zwischen dem oberen und unteren Block-Element wird ein gemeinsamer Außenabstand gebildet.

Wird das Browserfenster soweit verkleinert, dass der rechte Fensterrand sich innerhalb des rechten Außenabstands (margin-right) befindet, werden keine Scrollleisten eingeblendet. Der rechte Außenabstand hat in dem Fall keine Auswirkung.

Wird das Browserfenster soweit verkleinert, dass der rechte Fensterrand sich innerhalb des rechten Rahmens (border-right) oder noch weiter weiter links befindet, werden im Browserfenster automatisch Scrollleisten eingeblendet, sodass man kann bis zur rechten Rahmenkante scrollen kann.

Block-Elemente mit width und ohne float

Verhalten der Block-Elemente bei Angabe einer Breite, mit umfließenden Elementen

Damit man Block-Elemente nebeneinander positionieren kann, benötigt man die Eigenschaft float. Mit float: left; kann man ein Element linksseitig anordnen, sodass das folgende Element rechts davon positioniert werden kann. Mit float: right; wird ein Element rechts angeordnet und wird auf der linken Seite von anderen Elementen umflossen.

Hierbei hat der rechte Außenabstand eine Wirkung. Sobald der Rand des Browserfensters sich innerhalb des rechten Außenabstands befindet, erfolgt beim "floatenden" Element ein Zeilenumbruch und es wird unterhalb des vorherigen Elements positioniert. Außerdem wird zwischen dem oberen und unteren Element kein gemeinsamer Außenabstand gebildet. Jedes Element besitzt einen eigenen Außenabstand, sodass der Zwischenraum größer ist.

Wird das Browserfenster soweit verkleinert, dass der Browserrand in den Bereich des rechten Außenabstands vom breitesten Element hinein ragt, so hat margin-right keine Auswirkung und es werden keine Scrollleisten eingeblendet. Erst beim Verkleinern des Browserfensters in den Bereich des äußersten Rahmens werden Scrollleisten eingeblendet.

Block-Element mit width und float

Content-Box und Border-Box

Gemäß dem Standard-Modell wird mit width und height die Größe von einem Content-Box beschrieben, da die übrigen Eigenschaften hinzu addiert werden. Viele Entwickler waren damit nicht zufrieden, da sie ständig Berechnungen durchführen mussten, um die richtige Breite und Höhe der Box zu ermitteln. Außerdem führte das bei bestimmten Layouts zu erheblichen Problemen. Wenn man beispielsweise zwei Boxen eine Breite von 50% zuweisen möchte, sodass diese nebeneinander angeordnet werden, konnte man der Box keine Rahmenbreite in Pixel zuweisen, weil der Rahmen hinzu addiert wird, die Box dadurch breiter als 50% ist und die beiden Elemente deshalb untereinander positioniert werden. Solch ein Layout kann z.B. für eine Raster-Navigation einer Website mit responsive Webdesign notwendig sein.

Mit CSS3 wurden solche Wünsche berücksichtigt und es wurde ein alternatives Box-Modell entwickelt, das über die Eigenschaft box-sizing aktiviert wird. Damit wird das Box-Modell umgeschaltet, sodass sich die Breite und Höhe auf den Inhaltsbereich inklusive padding und border bezieht. Der Außenabstand margin ist darin jedoch nicht enthalten.