XML-Know How

Abstände definieren – das Box-Modell

Das sogenannte Box-Modell ist für das Verständnis des Rendering-Prozesses, also des automatischen Umbruchs einer Website, von besonderer Bedeutung. Für den Gestalter ist es wichtig zu verstehen, dass sämtliche Elemente, die auf einer Website dargestellt werden können, für den Browser als Rahmen (Box) fungieren. Eine Website besteht also ausschließlich aus einer Anordnung von rechteckigen Boxen, die einander verdrängen und/oder überlagern. Auch jedes Blockelement (Absätze, Überschriften etc.) ist eine solche Box und kann hinsichtlich Breite, Rahmen sowie Innen- und Außenabständen definiert werden.

Auch hier wird zwischen Inline-Elementen (»Zeichenformaten«) und Block-Elementen (»Absatzformaten«) unterschieden. Ein Element wird dadurch zum Block-Element, dass es mit der CSS-Deklaration display: block versehen ist. Ein solches Element dehnt sich stets am Bildschirm so breit aus, wie es möglich ist (also bis zum rechten Bildschirmrand, bis es an ein anderes Element anstößt, oder so breit, wie das Element über die Eigenschaft width definiert wurde) und wird mit einem Zeilenwechsel abgeschlossen. Ein Inline-Element (markiert über display: inline) hingegen umschließt den Text so eng wie möglich – es dehnt sich also nicht aus – und beinhaltet keinen Zeilenwechsel.

Abb. 37 Das Prinzip von Block- und Inline-Elementen in HTML: Blockelemente dehnen sich bis zum Browserrand aus und führen zu einem Zeilenwechsel, Inlineelemente umschließen den Text so eng wie möglich

Merke

Das Box-Modell in CSS sieht für jeden Rahmen insgesamt drei Haupteigenschaften vor: den Außenabstand, die Beschaffenheit des Rahmens selbst und den Innenabstand. Die entsprechenden Eigenschaften lauten margin, border und padding.

Abb.38 Das Box-Modell in HTML

Jede dieser Eigenschaften lässt sich noch weiter differenzieren, indem man die einzelnen Seiten der Box separat mit den Eigenschaften margin-top, margin-left, margin-bottom und margin-right (border und padding entsprechend) anspricht.

Die Eigenschaft border besteht darüber hinaus aus drei Teilaspekten, nämlich border-width (Breite des Rahmens), border-color (Farbe des Rahmens) und border-style (Art der Rahmenlinie). Kombiniert mit der Möglichkeit, jede Seite des Rahmens separat anzusprechen, gibt es also eigentlich 12 Eigenschaften für einen Rahmen: border-right-color, border-top-style etc.

Wichtig

Wichtig (und zunächst ungewohnt) ist dabei die Feststellung, dass die Breite einer Box, die mit width angegeben wird, stets nur die Breite des Inhaltsbereichs angibt, nicht – wie man vermuten könnte – die Breite des Rahmens, der den Inhalt trägt.

Ein Rahmen, der wie folgt definiert ist

Beispiel:

div{ width: 600px;

padding: 10px;

border: 1px solid black;

margin: 20px; }

nimmt also einen Gesamtraum von 600px + 2 × 10px (padding-left und padding-right) + 2 × 1px (border-left-width und border-right-width) + 2 × 20px (margin-left und margin-right) = 662px ein.