CSS – Das Box-Modell - Tutorials

CSS – Das Box-Modell

Gerade CSS-Einsteiger stolpern oft über das Box-Modell und tun sich damit anfangs ein wenig schwer. Ein grundsätzliches Verständnis des Box-Modells und seinen Eigenheiten ist jedoch enorm wichtig. Hier ein kurzer Einstieg:

CSS legt für jede HTML-Seite ein Raster an, in dem alle Inhalte in rechteckigen Kästen, den Boxen, organisiert sind (klick auf das Bild links). Jedes HTML-Element hat eine Box.

In der Mitte der Box befindet sich der Inhalt (Text, Grafiken etc). Die sichtbare Breite einer Box besteht aus der Inhaltsbreite, dem Innenrand und dem Rahmen selbst. Der Außenrand legt den Abstand der sichtbaren Box zu benachbarten Elementen fest und ist unsichtbar. Die sichtbare Höhe einer Box setzt sich aus der Inhaltshöhe, dem Innenrand und dem Rahmen zusammen. Der Außenrand bestimmt, wo die Box für das nächste Element anschließt. Die Werte der drei Bestandteile können jeweils für links, rechts, oben und unten einzeln oder in einer zusammengefassten Eigenschaft definiert werden. Der Rahmen besitzt als einziges Element Eigenschaften die Linienart und die Farbe zu beeinflussen.
Also das Box-Modell enthält Möglichkeiten zum einstellen von Außenabständen (margin), Rändern, Innenabständen (padding) und Inhalten für jedes Element. Der Außenabstand margin ist für die Entfernung zum Nachbarelement verantwortlich. Der Innenabstand padding gibt den inneren Abstand vom Rand zum Inhalt des Elementes an. Border ist ein Dekorationselement und kann vielfälltig formatiert werden, CSS bietet hier sehr viele Möglichkeiten an.
Addiert man all diese Werte der jeweiligen Eigenschaften, erhält man die Gesamtbreite bzw die Gesamthöhe eines Elements. Leider interpretieren einige Browserversionen das Box-Modell unterschiedlich. Dieses Fehlverhalten und Lösungen hierzu, beschreibe ich in einem in Kürze folgenden kleinen Tutorial.

CSS – Das Box-Modell

Kommentar abgeben

Bitte lesen!