Zum Inhalt springen

#box-sizing

Legt fest, wie die Breite und Höhe des Elements berechnet werden: ob sie den Padding und die Ränder einschließen oder nicht.

default box-sizing: content-box;

Die Breite und Höhe des Elements gelten nur für den Inhalt des Elements.

Zum Beispiel hat dieses Element

  • border-width: 12px
  • padding: 30px
  • width: 200px

The full width is 24px + 60px + 200px = 284px.

Der Inhalt hat die definierte Breite. Die Box passt sich an diese Abmessungen an.

box-sizing: border-box;

Die Breite und Höhe des Elements gelten für alle Teile des Elements: den Inhalt, den Padding und die Ränder.

Zum Beispiel hat dieses Element

  • border-width: 12px
  • padding: 30px
  • width: 200px

Die vollständige Breite ist 200px, egal was.

Die Box hat die definierte Breite. Der Inhalt passt sich diesen Dimensionen an, und endet mit 200px – 60px – 24px = 116px.

Nach oben