Das CSS-Box-Modell

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Aus der Sicht eines Stylesheets ist jedes HTML-Element, mit dem Sie in einer Seite zu tun haben, in einem eigenen rechteckigen Kasten, einer so genannten Box, enthalten. Diese Tatsache wird weitaus deutlicher, wenn Sie große Inhaltsbereiche formatieren, wie etwa die drei Seitenbereiche, die wir in unserem Entwurf identifiziert haben. Aber es trifft genauso für individuelle Komponenten zu, mit denen Sie innerhalb dieser Bereiche zu tun haben. Das können Überschriften, Listen, Listenelemente und sogar Teile eines Textes sein.

Die folgende Abbildung zeigt das grundlegende Box-Modell.

Das grundlegende Box-Modell in CSS

Abbildung: Das grundlegende Box-Modell in CSS.

Im Zentrum einer CSS-Box befindet sich der eigentliche Inhalt. Verstehen Sie »Inhalt« nicht als Wörter oder Bilder, die beispielsweise einen Nachrichtenblock ausmachen oder eine Linkliste. Als »Inhalt« wird alles angesehen, was in einer Box enthalten ist.

Die obige Abbildung macht deutlich, dass die sichtbare Breite einer Box aus der Inhaltsbreite, dem Innenrand und dem Rahmen besteht. Der Außenrand legt den Abstand der sichtbaren Box zu benachbarten Elementen fest und bleibt selbst unsichtbar. Die sichtbare Höhe einer Box setzt sich aus der Inhaltshöhe, dem Innenrand und dem Rahmen zusammen. Der Außenrand bestimmt auch hier, wo die Box für das nächste Element anschließen darf.

Die Größen der drei Box-Bestandteile, Außenrand, Rahmen und Innenrand, können jeweils für links, rechts, oben und unten einzeln oder in einer zusammenfassenden Eigenschaft definiert werden. Die Definition der Rahmeneigenschaften ist ein klein wenig komplizierter, da dieser noch andere Charakteristiken haben kann, wie die Linienart oder eine Farbe.

Zuerst werden wir uns anschauen, wie man Innenränder sinnvoll für ein Layout einsetzt. Dann besprechen wir den Außenrand, der sich ähnlich verhält wie der Innenrand. Als Letztes werden wir uns den Eigenschaften und Spielarten des Rahmens zuwenden.

Für die nächsten Abschnitte werden wir ein Layout mit nur einer Box verwenden und daran die CSS-Regeln demonstrieren.

Wir starten mit der folgenden Abbildung, einer Box ohne jegliche Eigenschaftsdefinition: kein Innenrand, kein Außenrand und kein Rahmen. Die Box besitzt die gleiche Breite und Höhe wie der Inhalt in ihr.

Box ohne Eigenschaftsdefinitionen

Abbildung: Box ohne Eigenschaftsdefinitionen.

Das h1-Element wird in unserem Beispiel mit der Eigenschaft background-color grau hinterlegt, damit wir das Innere vom Äußeren der Box auf unserer Abbildung unterscheiden können. Mit dem folgenden HTML-Code wird diese Seite erzeugt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Box ohne Eigenschaftsdefinitionen</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
      body {
        background-color: #ffffff;
      }
      h1 {
        background-color: #c0c0c0;
        font-family: helvetica, arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Hilfe! Ich stecke in einem Box-Modell fest!</h1>
  </body>
</html>

Gemäß unserer Devise »CSS statt HTML« werden wir alle Veränderungen im weiteren Verlauf nicht im HTML-Code, sondern nur im Stylesheet vornehmen. Die jeweils veränderten oder hinzugefügten Fragmente werden hervorgehoben.

Pixel versus Prozentwerte

Das Box-Modell ist ein reines Layoutwerkzeug, mit dem Elemente auf den Punkt genau positioniert werden können. Für konstante Abstände und Ränder verwendet man bevorzugt Pixel (abgekürzt px) als Einheit. Soll das Layout der Seite jedoch dehnbar sein und sich dynamisch an die jeweilige Größe des Browserfensters anpassen, muss man die Definitionen mit Prozentangaben (mithilfe von %-Werten) vornehmen. Solche Layouts sind durch ihre »Dehnbarkeit« charakterisiert, die Elemente der Seite werden auseinander gezogen und zusammengeschoben, je nachdem, wie breit der Benutzer das Browserfenster einstellt.

Die Eigenschaften des Innenrands

In einer CSS-Regel gibt es vier spezifische Eigenschaften, die zur Bestimmung des Innenrands definiert werden können: padding-left, padding-right, padding-top und padding-bottom.

Wir definieren in unserer bisher unbearbeiteten Box eine der Innenrand-Eigenschaften, um zu sehen, was passiert. Ändern Sie das Stylesheet der Beispieldatei wie folgt (wie gesagt, werden Änderungen hervorgehoben):

h1 {
  background-color: #c0c0c0;
  color: black;
  padding-left: 25px;
}

Das Ergebnis dieser Änderung zeigt die folgende Abbildung. Der Abstand zwischen dem Text und der sichtbaren Grenze der Box ist auf der linken Seite auf 25 Pixel angewachsen.

Box-Modell mit padding-left

Abbildung: Box-Modell mit padding-left.

Die anderen Eigenschaften des Innenrands können genauso definiert werden, im folgenden Beispiel mit einem unterschiedlichen Wert für jede Seite der Box:

h1 {
  background-color: #c0c0c0;
  color: black;
  padding-left: 25px;
  padding-top: 15px;
  padding-bottom: 30px;
  padding-right: 20px;
}

Box mit unterschiedlich definierten Innenrändern

Abbildung: Box mit unterschiedlich definierten Innenrändern.

Die obige Abbildung zeigt, was die unterschiedlich definierten Eigenschaften des Innenrands im Browserfenster bewirken.

Wie Sie sehen, hat der Innenrand auf der rechten Seite seinen Wert anscheinend nicht angenommen. Obwohl wir padding-right mit 20 Pixel angegeben haben, zieht sich die Box weiter bis an den rechten Rand des Browserfensters.

Das kommt daher, dass padding-right den Abstand zwischen dem rechten Ende des Textes und dem Ende der Überschrift, die grau unterlegt ist, einfügt. Dieser Abstand ist hier schlecht zu sehen, weil die Überschrift ein Blockelement ist und sich damit automatisch über die ganze Seitenbreite erstreckt. Dabei wird auf der rechten Seite genug Raum für den Text gelassen. Wenn Sie das Browserfenster schmaler als die Box des h1-Elements machen, können Sie den Innenrand sehen.

Beispiele für die Wirkung von padding-right

Abbildung: Beispiele für die Wirkung von padding-right.

Die Abbildung zeigt es genauer: Auf dem ersten Screenshot wurde das Browserfenster so weit verkleinert, dass das Wort »fest« eigentlich noch in die zweite Zeile passen würde. Durch unser padding-right mit 20 Pixel wird es jedoch in die dritte Zeile geschoben.

In dem zweiten Screenshot wird der Innenrand noch deutlicher erkennbar. Die Fenstergröße ist so eingestellt, dass in jede Zeile nur jeweils ein Wort passt. Der Rand zum Browserfenster ist zwar groß genug, dass noch das eine oder andere Wort darin Platz hätte. Der von uns definierte Innenrand aber schränkt den Platz für den Inhalt ein. Nimmt man den Innenrand aus dem Stylesheet wieder heraus, kommt bei gleicher Fenstergröße das Ergebnis im dritten Screenshot zustande.

Um die Definition des Innenrands auf allen vier Seiten einfacher zu gestalten, gibt es dafür eine zusammenfassende Eigenschaft mit der Bezeichnung padding. Für sie kann eine Liste von bis zu vier Werten festgelegt werden, die je durch ein Leerzeichen getrennt werden. Die folgende Tabelle zeigt, zu welchen Ergebnissen die vier möglichen Wertkombinationen in padding führen.

Tabelle: Die Anzahl der Werte für die Kurzform von padding.

Anzahl der Werte Auswirkung auf den Innenrand
1 Der Wert ist gültig für alle vier Seiten des Innenrands.
2 Der erste Wert ist gültig für oben und unten, der zweite Wert für links und rechts.
3 Der erste Wert ist gültig für oben, der zweite für rechts und links und der dritte für unten.
4 Der erste Wert ist gültig für oben, der zweite für rechts, der dritte für unten und der vierte für links.

Wie man sich Reihenfolge merken kann
Um sich die Reihenfolge, in der diese Werte angegeben werden müssen, besser merken zu können, denken Sie einfach daran, dass sie im Uhrzeigersinn vergeben werden. Sie können sich auch als Eselsbrücke das Wort »trouble« (top, right, bottom, left) merken.

Mit der zusammenfassenden padding-Eigenschaft kann die obige Stilregel wesentlich kürzer formuliert werden:

h1 {
  background-color: #c0c0c0;
  color: black;
  padding: 15px 20px 30px 25px;
}

Um oben und unten sowie links und rechts jeweils einen gleich großen Innenrand zu erhalten, definiert man padding mit nur zwei Werten:

h1 {
  background-color: #c0c0c0;
  color: black;
  padding: 15px 25px;
}

Um einen gleichen Innenrand für alle Seiten zu erhalten, weist man der zusammenfassenden Eigenschaft padding nur einen Wert zu:

h1 {
  background-color: #c0c0c0;
  color: black;
  padding: 25px;
}

Was passiert, wenn wir für die Definition des Innenrands relative Werte wie die M-Höhe oder eine Prozentangabe verwenden? Beide führen an dieser Stelle zu unterschiedlichen Ergebnissen. Die M-Höhe skaliert den Innenrand im Verhältnis zur Schriftgröße des Inhalts in der Box. Eine Prozentangabe wiederum stellt den Abstand im Verhältnis zur gesamten Breite des Inhalts in der Box dar. Um uns das zu veranschaulichen, erstellen wir eine neue HTML-Seite mit zwei hellgrau hinterlegten Überschriften auf einem dunkleren Seitenhintergrund:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Box ohne Eigenschaftsdefinitionen</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
      body {
        background-color: #808080;
        color: black;
      }
      h1, h4 {
        background-color: #c0c0c0;
        color: black;
      }
    </style>
  </head>
  <body>
    <h1>Hilfe! Ich stecke in einem Box-Modell fest!</h1>
    <h4>Aber für eine gute, alte h4-Überschrift wie mich, ist es hier nicht zu eng. Im Gegenteil, es ist sogar recht geräumig.</h4>
  </body>
</html>

Wir haben in dem Code eine dunkelgraue Hintergrundfarbe für die Seite definiert und ein h4-Element hinzugefügt, für das dieselbe Stilregel gültig ist wie für das h1-Element.

Die folgende Abbildung zeigt die HTML-Seite, wie sie im Browser angezeigt wird.

Ausgangsbeispiel ohne proportionalen Innenrand

Abbildung: Ausgangsbeispiel ohne proportionalen Innenrand.

Jetzt definieren wir im Stylesheet für beide Überschriften einen Innenrand mit einem relativen Wert von 1em:

body {
  background-color: #808080;
  color: black;
}
h1, h4 {
  background-color: #c0c0c0;
  color: black;
  padding: 1em;
}

Wie die nächste Abbildung zeigt, wird die Größe des Innenrands proportional zur jeweiligen Größe der Überschriften berechnet.

Relative Innenränder mit em

Abbildung: Relative Innenränder mit em.

em, eine Maßangabe für die Höhe
1em bezeichnet die einfache Höhe der Versalie M in der Schrift, die in den Überschriften verwendet wird. Da eine h1-Überschrift standardgemäß auf einen größeren Schrifttyp zurückgreift als eine h4-Überschrift, wird auch ihr Innenrand größer dargestellt, obwohl für beide Überschriften dieselbe Stilregel gültig ist.

Was passiert, wenn wir für den proportionalen Wert des Innenrands anstelle der M-Höhe eine Prozentangabe verwenden, veranschaulicht folgendes Beispiel:

body {
  background-color: #808080;
  color: black;
}
h1, h4 {
  background-color: #c0c0c0;
  color: black;
  padding: 10%;
}

Proportionaler Innenrand unter Einsatz von Prozentangaben

Abbildung: Proportionaler Innenrand unter Einsatz von Prozentangaben.

Wie die obige Abbildung zeigt, erzeugt die Prozentangabe deutlich größere Innenränder. Unsere Stilregel weist den Browser an, die Innenränder beider Überschriften mit einem Wert von 10% darzustellen. Eigentlich bezieht sich dieser Prozentwert nur auf die Inhaltsbreite des Elements. Da Überschriften jedoch Blockelemente sind, ist deren Inhaltsbreite genau gleich der Fensterbreite.

Wir haben in der Stilregel die Überschriften mit einer Farbe hinterlegt, um die eigentlich unsichtbaren Innenränder der Boxen sichtbar zu machen. Dieser Trick ist beim Design sehr hilfreich, da somit das Raster des Box-Modells sichtbar wird. Die folgende Abbildung stellt dieselbe Seite wie die letzte Abbildung dar, nur ohne die Hintergrundfarben für die Überschriften. Sie behalten ihre relativen Abstände bei und harmonieren in der Gestaltung gut miteinander.

Beispiel für padding ohne Hintergrundfarben

Abbildung: Beispiel für padding ohne Hintergrundfarben.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg