CSS-Eigenschaft box-sizing

Ein anderer Umgang mit dem Box-Model

Bei der Programmierung von HTML-Gerüsten müssen während der Planung von Breiten und Höhen immer die Innenabstände (das sog. Padding) addiert werden. Das kann besonders für Einsteiger eine Herausforderung darstellen. Abhilfe kann die CSS-Eigenschaft „box-sizing“ bringen.

Der Internet Explorer unterstützt diese Eigenschaft ab Version 8, Webkit-Browser, Firefox und Opera unterstützen die Eigenschaft mit den jeweiligen Präfixen.

.new-box-model {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

Um das klassiche Verhalten wiederherzustellen empfiehlt sich die Benutzung folgender Stil-Definition:

.classic-box-sizing {
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
}

Leider sind auch heute noch Internet Explorer in der Version 6 und 7 im Einsatz. Das Script box-sizing.htc bringt die Unterstützung auch in diese veralteten Browser.
Weitere Informationen unter: https://github.com/Schepp/box-sizing-polyfill