Das CSS-Box-Modell ist ein Konzept für das Design und die Layout-Anordnung von HTML-Elementen auf Webseiten. Es definiert, wie die verschiedenen Teile eines Elements, wie Inhalte, Ränder, Polster und Ränder, zueinander in Beziehung stehen und zusammenarbeiten.
Jedes HTML-Element auf einer Webseite kann als Rechteck angesehen werden und das Box-Modell beschreibt dieses Rechteck.
- Der Inhalt (Content) des Elements, das ist der Text, die Bilder oder was auch immer in dem Element enthalten ist.
- Der Polster (Padding), das ist der Raum zwischen dem Inhalt des Elements und dessen Rand (Border).
- Der Rand (Border) umschließt den Inhalt und dessen Polster.
- Der Außenrand (Margin), der den Raum zwischen diesem Element und den benachbarten Elementen definiert.
Diese vier Teile eines Elements bilden zusammen das Box-Modell.
Um das Box-Modell auf ein HTML-Element anzuwenden, müssen Sie CSS-Stile auf das Element anwenden. Hier ist ein einfaches Beispiel:
```css
div {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
```
In diesem Beispiel wird ein `div`-Element definiert, das 200 Pixel breit ist (dies ist der Inhaltsteil des Box-Modells). Es hat ein “Polster” von 10 Pixeln um den Inhalt herum, einen 5 Pixel dicken schwarzen Rand und einen Außenrand von 20 Pixeln. Alle diese Werte können geändert werden, um das Layout des `div`-Elements zu kontrollieren.
Es ist wichtig zu beachten, dass die endgültige Größe des Elements die Summe aus Inhalt, Polster, Rand und Außenrand ist. In diesem Fall wäre die endgültige Breite des `div` 250 Pixel (200 für den Inhalt, 10 für das Polster auf jeder Seite, 5 für den Rand auf jeder Seite und 0 für den Außenrand, da der Außenrand keinen Einfluss auf die Gesamtbreite des Elements hat).
