Das CSS Boxmodel

0 | 10306 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Das CSS Boxmodel" mit Ihrem Wissen!

Anzeige Hier werben

  • gute Erklärung (mit bildern) von inline und block-level Elementen

Das Boxmodel beschreibt die Komponenten wie Inhalt, Rand, Außen- und Innenabstand aus denen Elemente in CSS aufgebaut sind.

Jedes Element auf einer Seite ist eine rechteckige Box. Es wird zwischen zwei Typen differenziert: den Inline- und den Block-Elementen. Der Unterschied liegt darin, dass Inline-Elemente keine Höhe, keine Breite und keinen Außenabstand haben können. Block-Elemente stehen - sofern nicht mit CSS modifiziert - alleine in einer Zeile auch wenn sie nur sehr schmal sind. Inline-Elemente hingegen werden in der gleichen Zeile dargestellt.

Elemente bestehen also aus folgenden Teilen:

  • Inhalt (Text, Bilder, weitere Elemente)
  • Innen- und Aussenabstand (Aussenabstand nur bei Block-Elementen)
  • Rand
  • Hintergrund (Farbe und/oder Bild)

Aufbau

Die folgende Grafik zeigt wie das Boxmodel hierarchisch aufgebaut ist:

Bild zu Das CSS Boxmodel
Hierarchie des Boxmodels

Interaktive Grafik

margin und padding sind immer transparent. border, margin und padding können für alle vier Seiten (top, right, bottom, left) andere Werte haben.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "Das CSS Boxmodel" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Das CSS Boxmodel" hier bearbeiten.

Mitarbeiter