Box-Modell (CSS Lexikon)
letzte Änderung am 25.07.2009
Für die meisten Elemente eines HTML-Dokuments erzeugt der Browser in der Ansicht eine rechteckige Box. Eine solche Box besteht aus den vier verschiedenen Bereichen content area, padding, border, margin:
Die Größen können für jede Boxseite (top, bottom, left, right) einzeln festgelegt werden.
Beachte: Die Größen width und height bezeichnen die Breite bzw. Höhe nur der content area, ohne padding, ohne border und ohne margin. - Die background-Eigenschaften gelten für content area, padding und border.
Der IE6 zeigt im Quirks Mode den sog. Boxmodel-Bug: Dabei interpretiert der Browser width bzw. height als Summe aus Breite bzw. Höhe von content area, padding und border statt nur der Breite bzw. Höhe der content area. In diesem Falle ergibt sich z.B. bei width:200px und padding:20px für den Inhalt nur noch 160px Breite statt der 200px.
Der Firefox-Browser bietet mit der Firebug-Erweiterung ein nützliches Werkzeug zur Veranschaulichung der Boxen. Wenn man mit der Maus im Quelltext über ein HTML-Tag wischt, wird die zugehörige Box in der Ansicht farblich markiert: die content area blau, das padding lila und der margin gelb; außerdem wird im Layout-Tab rechts die Box schematisch dargestellt mit aktuellen Pixelwerten:
Die Boxen werden vom Browser gemäß dem visual formatting model der W3C CSS 2.1 Spezifikation auf dem jeweiligen Medium angeordnet (Bildschirm, Printmedium etc.). Siehe dazu z.B. normal flow, float, position, display.
Links: Firebug, W3C CSS 2.1: visual formatting model
Quelle: W3C CSS 2.1: Box Model
>> Allgemeine Fragen oder Probleme mit dem Lexikon-Begriff? Hier gehts zum Forum!
- content area: der Inhaltsbereich, also der Bereich, der gerade groß genug ist, den Inhalt der Box zu fassen.
Breite und Höhe der content area können mit width und height angegeben werden. - padding: die Polsterung, als Größe: Innenabstand, der Platz zwischen content area und border
- border: die Randlinie, als Größe: die Randlinienbreite, -farbe und -stil
- margin: der Saum oder Außenrand, als Größe: Außenabstand
Die Größen können für jede Boxseite (top, bottom, left, right) einzeln festgelegt werden.
Beachte: Die Größen width und height bezeichnen die Breite bzw. Höhe nur der content area, ohne padding, ohne border und ohne margin. - Die background-Eigenschaften gelten für content area, padding und border.
Der IE6 zeigt im Quirks Mode den sog. Boxmodel-Bug: Dabei interpretiert der Browser width bzw. height als Summe aus Breite bzw. Höhe von content area, padding und border statt nur der Breite bzw. Höhe der content area. In diesem Falle ergibt sich z.B. bei width:200px und padding:20px für den Inhalt nur noch 160px Breite statt der 200px.
Der Firefox-Browser bietet mit der Firebug-Erweiterung ein nützliches Werkzeug zur Veranschaulichung der Boxen. Wenn man mit der Maus im Quelltext über ein HTML-Tag wischt, wird die zugehörige Box in der Ansicht farblich markiert: die content area blau, das padding lila und der margin gelb; außerdem wird im Layout-Tab rechts die Box schematisch dargestellt mit aktuellen Pixelwerten:
Die Boxen werden vom Browser gemäß dem visual formatting model der W3C CSS 2.1 Spezifikation auf dem jeweiligen Medium angeordnet (Bildschirm, Printmedium etc.). Siehe dazu z.B. normal flow, float, position, display.
Links: Firebug, W3C CSS 2.1: visual formatting model
Quelle: W3C CSS 2.1: Box Model
>> Allgemeine Fragen oder Probleme mit dem Lexikon-Begriff? Hier gehts zum Forum!
