Box-Größe

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

Dies kann Layoutberechnungen vereinfachen und unerwartete Probleme bei der Größenanpassung verhindern.

Hier ist die grundlegende Syntax für die Verwendung der Eigenschaft box-sizing:

selector {
    box-sizing: value;
}

value: Das gewünschte Box-Sizing-Verhalten, das eines der folgenden sein kann:

• content-box: Dies ist der Standardwert. Die Eigenschaften width und height enthalten nur die Größe des Inhalts. Innenabstände, Rahmen und Außenabstände werden außerhalb der 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; /* Default behavior */
}

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

In diesem Beispiel hat das Element <div> den Wert box-sizing für content-box. 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 einen box-sizing-Wert von border-box. 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, was zu einer Inhaltsbreite von 400px - 60px (linker und rechter Innenabstand) - 20px (linker und rechter Rahmen) = 320px führt. Die Höhe wird ähnlich berechnet.