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.
.new-box-model {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
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;
}
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
}