Box-Modell
Code Sources Icon Code Sources Icon

Wenn du mit Abständen und Rahmen gestalten willst, musst du das CSS Box-Modell kennen.
Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
HTML Elemente

Aufgabe 7 > weiter

Fahre mit der Maus über die Grafik im HTML-Bereich und untersuche die Animation. Die "Box" setzt sich aus folgenden Einzelteilen zusammen:

  • margin: der Aussenabstand eines HTML-Elements
  • background / HTML-Element: Das HTML-Element besitzt Höhe, Breite, Hintergrund (es ist immer rechteckig)
  • border: die Kontur hat eine Dicke von 0 bis >
  • padding: der Innenabstand
  • content: Text oder Bildinhalt des HTML-Elements

Diese Eigenschaften können auf jedes HTML-Element angewendet werden. Jedes HTML-Element hat eine Breite und Höhe. Beispiel:

        p {
            width:200px;
            height:50px;
        }

Wenn diesem Absatz zusätzlich Aussen- Innenabstand und Rand zugewisen werden, kumulieren sich die Werte, das ursprüngliche Objekt wird Grösser. Beispiel:

        p {
            width:200px;
            height:50px;
            margin: 20px;
            padding:10px;
            border: 2px solid red;
        }
Rechne!
  • Breite: 20px (margin-left) + 2px (border-left) + 10px (padding-left) + 200px (content) +10px (padding-right) + 2px (border-right) + 20px (margin-right) = 264px
  • Höhe: 20px (margin-top) + 2px (border-top) + 10px (padding-top) + 50px (content) +10px (padding-bottom) + 2px (border-bottom) + 20px (margin-bottom) = 114px
  • Das HTML-Element benötigt nun 264 x 114px an Platz, der Inhalt alleine nur 200 x 50px
  • Beachte eine Box-Model-Strategie, bei der nicht alle kumuliert wird > Aufgabe: Box-Sizing!
DB-Table: cssbasic7