Box-Sizing

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 39 von 76.

In CSS ist box-sizing eine Eigenschaft, die bestimmt, wie die Gesamtbreite und -höhe eines Elements berechnet werden. Standardmäßig enthalten die Eigenschaften width und height nur die Größe des Inhalts und berücksichtigen weder Innenabstände (Padding), Rahmen (Borders) noch Außenabstände (Margins). Durch die Verwendung der Eigenschaft box-sizing können Sie dieses Verhalten jedoch ändern und festlegen, dass die Eigenschaften width und height auch die Größen für Innenabstände und Rahmen einschließen.

Dies kann Layout-Berechnungen vereinfachen und unerwartete Größenprobleme verhindern.

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

selector {
    box-sizing: value;
}

value: Das gewünschte box-sizing-Verhalten, welches einer der folgenden Werte sein kann:

content-box: Dies ist der Standardwert. Die Eigenschaften width und height beziehen sich nur auf die Größe des Inhalts. Padding, Rahmen und Außenabstände werden außerhalb der angegebenen Breite und Höhe hinzugefügt.

border-box: Die Eigenschaften width und height beziehen den Inhalt, das Padding und die Rahmengrößen mit ein. Außenabstände (Margins) 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 <div>-Element einen box-sizing-Wert von content-box. Das bedeutet, dass die tatsächlich gerenderte Breite des <div> 300px (Inhalt) + 40px (linker und rechter Innenabstand) + 10px (linker und rechter Rahmen) = 350px sein wird. 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 beinhaltet die angegebene width von 400px den Inhalt, das Padding und den Rahmen. Der tatsächliche Inhaltsbereich verkleinert sich, um das Padding und den Rahmen aufzunehmen, was zu einer Inhaltsbreite von 400px - 60px (linkes und rechtes Padding) - 20px (linker und rechter Rahmen) = 320px führt. Die Höhe wird auf ähnliche Weise berechnet.

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument mit zwei Bereichen (<div>) gegeben, die jeweils eine unterschiedliche Klasse haben. Ihre Aufgabe ist es, die Eigenschaft box-sizing zu verwenden, um zu steuern, wie die Breite und Höhe dieser Elemente berechnet werden. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die das <div>-Element mit der Klasse <strong>content-box-div</strong> anspricht. Setzen Sie die width auf 300px, die height auf 200px, das padding auf 20px, den border auf 5px solid blue und das box-sizing auf content-box.
Schreiben Sie eine CSS-Regel, die das <div>-Element mit der Klasse <strong>border-box-div</strong> anspricht. Setzen Sie die width auf 300px, die height auf 200px, das padding auf 20px, den border auf 5px solid red und das box-sizing auf border-box.

Spickzettel

Die Eigenschaft box-sizing bestimmt, wie die Gesamtbreite und -höhe eines Elements berechnet werden:

selector {
    box-sizing: value;
}

Werte:

content-box (Standard): Breite und Höhe beinhalten nur die Inhaltsgröße. Padding und Rahmen werden außen hinzugefügt.
border-box: Breite und Höhe beinhalten Inhalt, Padding und Rahmengrößen. Außenabstände (Margins) werden weiterhin außen hinzugefügt.

/* Beispiel für content-box */
div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box;
    /* Gesamtbreite: 300px + 40px + 10px = 350px */
}

/* Beispiel für border-box */
.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
    /* Gesamtbreite: 400px (Inhalt verkleinert sich passend) */
}

Probier es selbst

<html>
<head>
    <title>Box Sizing</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="content-box-div">This is a div with content-box.</div>
    <div class="border-box-div">This is a div with border-box.</div>
</body>
</html>