box-sizing steuert, was die Eigenschaften width und height tatsächlich messen. Der Standard (content-box) misst nur den Inhalt; lässt sie Padding und Rahmen einbeziehen.
box-sizing steuert, was die Eigenschaften width und height tatsächlich messen. Der Standard (content-box) misst nur den Inhalt; lässt sie Padding und Rahmen einbeziehen.
border-box.box {
box-sizing: content-box; /* the default */
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px ← bigger than you asked for! */
Bei content-box werden Padding und Rahmen auf die width aufgerechnet, sodass das Element breiter wird als die Zahl, die Sie festgelegt haben. Dies zerstört Layouts: Eine Box mit width: 50% und Padding überläuft ihre 50%.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
Bei border-box ist width die endgültige gerenderte Breite — Padding und Rahmen werden von innen abgezogen. Die Zahl, die Sie festlegen, ist die Größe, die Sie erhalten, was viel intuitiver ist.
*, *::before, *::after {
box-sizing: border-box;
}
Fast alle modernen Stylesheets, Frameworks und Resets wenden dies global an. Es macht die Größenbestimmung vorhersehbar: width: 50% + Padding bleibt genau 50% breit, zwei Boxen mit width: 50% sitzen nebeneinander ohne Überlauf usw.
border-box beseitigt die einzelne häufigste Quelle von Layout-Mathe-Kopfschmerzen — das ständige mentale Hinzufügen von Padding und Rahmen zu jeder Breite.
Es global zu setzen gilt als bewährte Standard-Praktik, da "die Breite, die ich setze, ist die Breite, die ich bekomme" so ist, wie Sie erwarten, dass die Größenbestimmung natürlicherweise funktioniert.