Box-Größe

In CSS ist box-sizing eine Eigenschaft, die bestimmt, wie die Gesamtbreite und -höhe eines Elements berechnet werden. Standardmäßig berücksichtigen die Eigenschaften width und height nur die Größe des Inhalts und beziehen weder Abstände noch Rahmen oder Außenabstände ein. Mit der Eigenschaft box-sizing kannst du dieses Verhalten jedoch ändern und dafür sorgen, dass die Eigenschaften width und height auch die Größen der Abstände und Rahmen einbeziehen.

Dies kann Layoutberechnungen vereinfachen und unerwartete Größenprobleme verhindern.

Hier ist die grundlegende Syntax zur Verwendung der Eigenschaft box-sizing:

selector {
    box-sizing: value;
}

value: Das gewünschte Verhalten der Box-Größenberechnung, das eines der folgenden sein kann:

• content-box: Dies ist der Standardwert. Die Eigenschaften width und height umfassen nur die Größe des Inhalts. Innenabstände, Rahmen und Außenabstände werden zur angegebenen Breite und Höhe hinzugefügt.

• border-box: Die Eigenschaften width und height umfassen die Größen von Inhalt, Innenabstand und Rahmen. Außenabstände werden weiterhin außerhalb des Elements hinzugefügt.

Zum Beispiel:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Standardverhalten */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

In diesem Beispiel hat das Element <div> den Wert content-box für box-sizing. Das bedeutet, dass die tatsächlich dargestellte Breite von <div> 300px (Inhalt) + 40px (linkes und rechtes Padding) + 10px (linker und rechter Rahmen) = 350px beträgt. Die Höhe wird auf ähnliche Weise berechnet.

Andererseits hat das Element mit der Klasse container den Wert border-box für box-sizing. In diesem Fall umfasst die angegebene width von 400px den Inhalt, den Innenabstand und den Rahmen. Der tatsächliche Inhaltsbereich wird verkleinert, um den Innenabstand und den Rahmen aufzunehmen, sodass sich eine Inhaltsbreite von 400px - 60px (linker und rechter Innenabstand) - 20px (linker und rechter Rahmen) = 320px ergibt. Die Höhe wird auf ähnliche Weise berechnet.