- html-Box
Eigenschaften html-Element: background-color : silver; border:solid 2px lightblue
Das html-Element hat kein übergeordnetes Elternelement. Es füllt das ganze Browserfenster bis zum Rand.
Der untere Rahmen ist jedoch abhängig vom Inhalt.
- body-Box
Eigenschaften body-Element: background-color:white; border:solid 1px black
Das body-Element ist ein Kind-Element des html-Elementes. Es erhält jedoch einen Default-Abstand zum html-Element.
- Allgemeine Grundregeln
Block-Elemente sind so breit wie möglich, so hoch wie nötig.
Inline-Elemente sind so breit wie nötig, so hoch wie nötig.
Aufbau einer Box: Aussenabstand (margin) - Rahmen (border) - Innenabstand (padding) - Elementinhalt
Die meisten Elemente erhalten vom Browser Defaultwerte für Aussenabstand, Rahmen und Innenabstand
Dieser gelbe Bereich ist ein div-Element mit style background-color:yellow; border:solid 2px blue
div-Elemente haben den Vorteil, dass sie für Aussenabstand, Rahmen und Innenabstand die Defaultwerte 0 erhalten.
Gesamtbreite eines Elementes
Breite eines Elementes ist: width + 2 x border + 2 x padding
Zu betrachtendes div-Element ist mit beiger Hintergrundfarbe dargestellt
Elementinhalt ist im folgenden als div-Element mit hellgrünem Hintergrund dargestellt. Je nach Wahl der Einstellungen kann das Kindelement das Elternelement komplett verdecken.
width:288px; padding:5px;
border:1px;
width:270px; padding:5px;
border:10px;
width:270px; padding:5px;
border:10px; margin-left: 10px;
width:288px; padding:5px;
border:1px; margin-left: 10px;
width:288px; padding:5px; border:1px; margin-left: 10px; (child: padding 10px;)