Box-Model

Alle HTML-Elemente sind irgendwie immer in einem Kasten enthalten. Dabei gibt es welche, die sich wie Buchstaben verhalten, sogenannte Inline-Elemente und andere, welche die gesamte Breite einnehmen, sogenannte Block-Elemente. Jedes Element besteht aus vier Bereichen.

Boxmodel

Wenn nun einem Element eine Breite (width) gegeben wird, wird es sich entsprechend verhalten. Allerdings muss dabei beachtet werden, welche oben gezeigten Bereiche für die Breite berechnet werden.

Im Normalfall gilt die Breitenangabe nur für den Inhalt. Sollte das Element dann noch einen Rahmen haben, oder auch Innen- und Außenabstände, müssen diese für das Design berücksichtigt werden. 

box-sizing

Welche Bereiche für die Berechnung in Frage kommen, kann auch mit der Eigenschaft "box-sizing" verändert werden.

  • content-box
    Wie oben beschrieben und der Standard.
  • border-box
    Der Innenabstand und Rahmen werden mit einbezogen.

CodeZone

CSS

HTML

Auf Testzone anwenden