Box-Sizing

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 umfassen nur die Größe von content. padding, border 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 <div>-Element einen box-sizing-Wert von content-box. Das bedeutet, dass die tatsächlich gerenderte Breite des <div> 300px (Inhalt) + 40px (linkes und rechtes Padding) + 10px (linker und rechter Rahmen) = 350px betragen wird. Die Höhe wird auf ähnliche Weise berechnet.

Andererseits hat das Element mit der Klasse container den Wert box-sizing von border-box. In diesem Fall umfasst die angegebene width von 400px den content, padding und border. Der tatsächliche content-Bereich wird verkleinert, um padding und border aufzunehmen, was zu einer content-Breite von 400px - 60px (linkes und rechtes padding) - 20px (linker und rechter border) = 320px führt. Die Höhe wird auf ähnliche Weise berechnet.