CSS-Box-Modell
Das CSS-Box-Modell ist eines der grundlegendsten Konzepte im Webdesign. Es definiert, wie jedes HTML-Element aufgebaut ist: Inhalt, Padding, Border und Margin bilden die Box um das Element.
Elemente des Box-Modells
Das Box-Modell besteht aus vier Hauptteilen: Inhalt (content), Innenabstand (padding), Rahmen (border) und Außenabstand (margin). Zusammen bestimmen sie die Gesamtgröße und Position eines Elements.
Im folgenden Beispiel wird ein <div>-Element mit Padding-, Border- und Margin-Einstellungen angezeigt:
Visuelle Beispiele des Box-Modells
Die folgenden Beispiele zeigen, wie Padding-, Border- und Margin-Werte das Erscheinungsbild eines Elements verändern.
Verwendung von box-sizing
Standardmäßig beziehen sich Breite und Höhe nur auf den Inhalt, Padding und Border werden addiert. Mit der Einstellung <box-sizing: border-box;> werden jedoch auch Padding und Border in die angegebenen Maße einbezogen.
Welche CSS-Eigenschaft fügt einer Box einen Rahmen hinzu?
Selected: padding (1/4)
div {
width: 200px;
padding: 20px;
padding: 5px solid black;
margin: 10px;
}Move the slider to set the value, then check your answer.
Tipps zur Verwendung des Box-Modells
Die richtige Verwendung des Box-Modells ist für ein präzises Layout unerlässlich. Hier einige Tipps:
- Verwende <box-sizing: border-box;> für berechenbarere Größen.
- Lass immer genügend Abstand (margin) zwischen den Elementen, um die Lesbarkeit zu verbessern.
- Experimentiere mit verschiedenen Padding- und Border-Werten, um ein harmonisches Design zu erzielen.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
