#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: 12pxpadding: 30pxwidth: 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: 12pxpadding: 30pxwidth: 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.
Letzte Artikel von Redaktion (Alle anzeigen)
- Virtuelle private Netzwerke (VPN): Was steckt hinter dieser Technologie? - 30. August 2022
