Das Box-Modell
In dieser Lektion behandeln wir das grundlegende Konzept des CSS-Box-Modells,
das die Darstellung und Abstände von HTML-Elementen steuert.
1. Aufbau des Box-Modells
Jedes HTML-Element wird als rechteckige Box dargestellt. Eine Box besteht aus vier Bereichen:
- Content: der eigentliche Inhalt, z.B. Text oder Bild
- Padding: Innenabstand zwischen Inhalt und Rahmen
- Border: Rahmen um die Box
- Margin: Außenabstand zur nächsten Box
div {
width: 200px;
padding: 10px;
border: 2px solid #2b7cff;
margin: 20px;
}
2. Breite und Höhe
Die CSS-Eigenschaften width und height beziehen sich standardmäßig nur auf den Content-Bereich.
div {
width: 300px;
height: 150px;
}
3. Padding
Padding definiert den Innenabstand zwischen Inhalt und Rahmen.
- Top, Right, Bottom, Left – individuell einstellbar
- Kurzschreibweise:
padding: 10px 20px 15px 5px;
div {
padding: 10px 15px;
}
4. Border
Der Border umschließt den Inhalt und das Padding.
Eigenschaften: border-width, border-style, border-color
div {
border: 3px dashed #2e9a6a;
}
5. Margin
Margin definiert den Außenabstand zwischen der Box und anderen Elementen.
div {
margin: 20px auto;
}
6. Box-Sizing
Mit box-sizing kann gesteuert werden, ob width und height den Content oder die gesamte Box (inkl. Padding und Border) betreffen.
content-box – Standard, Breite = Contentborder-box – Breite = Content + Padding + Border
div {
box-sizing: border-box;
}
7. Zusammenfassung
- Jede Box besteht aus Content, Padding, Border, Margin
- width & height beeinflussen standardmäßig nur den Content
- Padding = Innenabstand, Border = Rahmen, Margin = Außenabstand
- box-sizing steuert Berechnung der Gesamtgröße
Das Box-Modell ist essenziell für Layout und Design von Webseiten.