box-sizing

Flexible Layouts mit box-sizing

Das bessere Box-Model

Wer kennt es nicht? Form Elemente sollen eine Weite von 100% bekommen und padding + border spielen einfach nicht mit. Die Lösung für dieses Problem sind wrapper-Strukturen für den korrekten Cross-Browser-Support. Bei modernen Browsern geht es auch anders:

box-sizing

<style type="text/css">
.box {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
</style>

Beispiel

padding: 0 20px; border: 10px solid black; width: 100%;

padding: 0 20px; border: 10px solid black; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
Impressum