Sie befinden sich hier:» CSS lernen » Box-Modell

kurz & gut:
Grundlagen für das Design einer Website über CSS - das Box-Modell liefert das Grundverständnis.

Über dieses werden z. B. Farben und Abstände definiert.

Box-Modell bei CSS

Für jedes Element wird eine rechteckige Fläche in CSS reserviert. Der englische Begriff "Box" steht für Schachtel (in unserem Fall, da html-Seiten ja eher in 2 Dimensionen leben, also eine Fläche). Über das Box-Modell wird das Design einer Seite erstellt, daher ist ein Verständnis dieses Box-Modells wichtig.

Wie sieht der Aufbau der "Box" aus?

Von Innen nach außen:

Inhalt: für den Inhalt kann eine Breite (width) und eine Höhe (height) definiert werden
Innenabstand: definiert den Platz zwischen Inhalt und Rahmen
Rahmen: dem Rahmen kann eine Stärke mitgegeben werden, die Strichart und eine Farbe (auch der Rahmen unsichtbar sein)
Außenabstand: Abstand zu anderen Elementen

Außenabstand

Rahmen

Innenabstand

Breite/Höhe

Inhalt

width / height

padding

border

margin

Zur Veranschaulichung einfach die verschiedene Bespiele für die Anwendung des Boxmodells ansehen.

vorheriges Kapitel: CSS einsetzen

nächstes Kapitel: Beispiele Box-Modell