1.6 Das Boxmodell

Problem

Sie wollen das CSS-Boxmodell besser verstehen und möchten wissen, auf welche Weise Innenabstände (margins), Außenabstände (paddings) und Rahmen (borders) den Inhalt umgeben.

Lösung

Jedes Block-Element (z.B. p oder div) besitzt eine obere, rechte, untere und linke Begrenzung. Diese Begrenzungen bestehen aus drei »Schichten«, die den Inhalt umgeben. Jedes Block-Element besitzt daher vier Bereiche:

Inhaltsbereich (content)

Der eigentliche Inhalt, wie etwa Text, Bilder, Java-Applets und andere Objekte. Der Inhaltsbereich befindet sich in der Mitte der Box.

Innenabstand (padding)

Umgibt den Inhaltsbereich.

Rahmen (border)

Die nächste Schicht umgibt den Innenabstand und definiert den Rahmen der Box.

Außenabstand (margin)

Transparenter ...

Get CSS Kochbuch now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.