http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Das CSS-Boxmodell

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

Aus der Sicht von CSS setzt sich ein XHTML-Dokument – wie auch jedes andere strukturierte (XML-)Dokument – aus einer Vielzahl von rechteckigen, im Allgemeinen unsichtbaren Boxen zusammen, deren Verhalten, Fluss und Ausdehnung Webautoren mit einer ganzen Reihe von Eigenschaften beeinflussen können. Das sogenannte CSS-Boxmodell ist eines der wichtigsten Teile von CSS und dient als Grundlage der Darstellung und Positionierung aller Elemente.

Polsterung, Rahmen und Randabstand

Jedes Element erzeugt eine rechteckige Box, die das Element umgibt und sich aus weiteren Boxen zusammensetzt: einer Contentbox (zum Beispiel ein Text oder ein Bild), einer Paddingbox (Polsterung), einer Borderbox (Rahmen) und einer Marginbox (Randabstand). Jeder dieser Bereiche kann in oben, rechts, unten und links aufgeteilt werden, siehe Abbildung 7.7.


Abb. 7.7: Das CSS-Boxmodell

Der Umfang einer Box wird als Kante (edge) bezeichnet. Jede Box hat vier Kanten:

  • Content-Kante oder innere Kante (content edge): Umgibt die Contentbox, also den Elementinhalt.
  • Kante der Polsterung (padding edge): Umgibt die Paddingbox, die den Abstand des Elementinhalts zum Rahmen darstellt. Wenn die Paddingbox die Breite 0 hat, entspricht die Kante der Polsterung der Content-Kante.
  • Rahmenkante (border edge): Umgibt die Borderbox, die dem Rahmen des Elements entspricht. Wenn die Borderbox die Breite 0 hat, entspricht die Rahmenkante der Kante der Polsterung.
  • Abstandkante oder äußere Kante (margin edge): Umgibt die Marginbox, die den Abstand des Elements zu den umgebenden Elementen bildet. Wenn die Marginbox die Breite 0 hat, entspricht die Abstandkante der Rahmenkante.

Elementbreite und -höhe

Die Gesamtbreite und -höhe eines Elements addiert sich aus der Breite beziehungsweise Höhe der einzelnen Boxen. Ein Element E mit

E {
  width: 100px;
  padding: 20px;     /* je 20px links und rechts */
  border: 1px solid; /* je 1px links und rechts  */
  margin: 0 30px;    /* je 30px links und rechts */
}

hat folglich eine Gesamtbreite von 202 Pixeln. Bei einem Element E mit

E {
  margin: 0;
  border: 0;
  padding: 0;
}

entspricht die Gesamtbreite der Breite der Contentbox, die im Allgemeinen so breit ist, wie es ihr Inhalt erfordert.

Weitere Informationen zur Berechnung der Breite und Höhe von Elementen erhalten Sie in Kapitel 7.8 »Breite und Höhe«.

Hintergrund

Der Hintergrund der einzelnen Boxen ist wie folgt definiert:

  • Der Hintergrund der Content-, Padding- und zunächst auch der Borderbox wird durch die Eigenschaft background-color des Elements bestimmt.
  • Der Hintergrund der Borderbox wird explizit durch die Eigenschaft border-color bestimmt. Bei unterbrochenen Rahmenstilen (dashed oder dotted) scheint die Hintergrundfarbe durch.
  • Der Hintergrund der Marginbox ist transparent.

Zum Seitenanfang

Boxtypen

Wie ein Element dargestellt wird und wie es benachbarte und verschachtelte Elemente beeinflusst, ist abhängig davon, welche Art von Box es umgibt, das heißt, welche Art von Box ein CSS-fähiges Benutzerprogramm für dieses Element generiert. Stellen Sie sich alle im Folgenden aufgeführten Boxen als normalerweise unsichtbare Rechtecke vor, die wie Ziegelsteine in einer Linie aneinanderstoßen oder auf- beziehungsweise untereinanderliegen.

Jedes Element bildet eine Box, an der sich seine Kindelemente ausrichten. Diese Box wird umschließender Block genannt.

Man spricht davon, dass eine Box den umschließenden Block für ihre Nachkommen einrichtet; normalerweise liegen alle Boxen, die durch die Nachkommen gebildet werden, innerhalb des umschließenden Blocks. Besonderheiten gibt es bei positionierten Elementen zu beachten, worauf ich in weiteren Abschnitten dieser Einführung genauer eingehen werde.

Was der äußerste umschließende Block eines XHTML-Dokuments ist, der alle anderen Boxen enthält, wird durch den Browser festgelegt, wobei auch die Fenstergröße eine Rolle spielt.


Abb. 7.8: Umschließender Block

In Abbildung 7.8 zeigt der äußere Rand den äußersten umschließenden Block, der hier gleichzeitig der umschließende Block für das hell dargestellte Element ist. Das helle Element richtet wiederum einen umschließenden Block ein, der für das dunkler gezeichnete innere Element gilt. Folgendes XHTML-Beispiel erzeugt Blöcke wie in dieser Abbildung illustriert.

<body>
  <div>
    <div>content</div>
  </div>
</body>

Alle Blockelemente erzeugen eine sogenannte Hauptblockbox, die entweder ausschließlich Blockboxen oder ausschließlich Inlineboxen enthält. Die Hauptblockbox richtet den umschließenden Block dieser Boxen ein.

Im folgenden Beispiel enthält die durch das äußere div-Element gebildete Hauptblockbox eine durch das innere div-Element gebildete konkrete Blockbox (die wiederum die Hauptblockbox für ihre Inhalte darstellt). Aus der Definition, dass eine Hauptblockbox entweder nur Blockboxen oder nur Inlineboxen enthält, ergibt sich die Forderung, dass die durch »Lorem ipsum in eam tation numquam deseruisse« und »Duo ei fugit minim minimum« gebildeten Boxen ebenfalls Blockboxen sind. Diese virtuellen Blockboxen werden »anonyme Blockboxen« genannt.

Anonyme Blockboxen sind nicht konkret existierende Boxen innerhalb einer Hauptblockbox. Sie werden eingefügt, sobald eine Hauptblockbox Blockboxen enthält, und dienen dazu, die Forderung zu erfüllen, dass eine Hauptblockbox ausschließlich Blockboxen enthält, sobald sie mindestens eine enthält.

<div>
  Lorem ipsum in eam tation numquam deseruisse
  <div>Sea eu eripuit deterruisset</div>
  Duo ei fugit minim minimum
</div>

Abbildung 7.9 stellt alle Blockboxen dar, die in diesem Beispiel erzeugt werden.


Abb. 7.9: Konkrete und anonyme Blockboxen

Alle Inline-Elemente erzeugen eine sogenannte Inlinebox, die weitere Inlineboxen enthalten kann.

Folgendes Beispiel erweitert das vorangehende um ein span-Element. Damit verfügt das innere div-Element über drei Inlineboxen: zum einen die konkrete Inlinebox, die durch das span-Element gebildet wird, und zum anderen die beiden anonymen Inlineboxen, die durch »Sea eu« und »deterruisset« erzeugt werden.

Anonyme Inlineboxen sind nicht konkret existierende Inlineboxen, die von einem Blockelement, das keine anderen Elemente oder nur Inline-Elemente enthält, um Inhalte herum erzeugt werden, die nicht selbst eine Inlinebox generieren.

<div>
  Lorem ipsum in eam tation numquam deseruisse
  <div>Sea eu <span>eripuit</span> deterruisset</div>
  Duo ei fugit minim minimum
</div>

Abbildung 7.10 stellt neben den Blockboxen auch alle Inlineboxen dar, die in diesem Beispiel erzeugt werden. Natürlich erzeugen auch die anonymen Blockboxen entsprechende (anonyme) Inlineboxen.


Abb. 7.10: Konkrete und anonyme Blockboxen (durchgezogene Linien) sowie konkrete und anonyme Inlineboxen (gestrichelte Linien)

Zwei besondere Arten von Boxen, die sich je nach Kontext wie eine Inline- oder wie eine Blockbox verhalten, sind kompakte Boxen und Run-in-Boxen.

Eine kompakte Box (compact box) ist eine spezielle Box, die sich wie folgt verhält: Folgt der kompakten Box eine (nicht gefloatete und nicht absolut positionierte) Blockbox, wird die kompakte Box wie eine einzeilige Inlinebox formatiert. Die Breite der kompakten Box wird mit der Breite des Margin-Bereichs der Blockbox verglichen: Ist die Breite kleiner oder gleich, wird die kompakte Box im Margin-Bereich dargestellt (also neben der Blockbox), ansonsten erfolgt ein Zeilenumbruch.

Folgendes Beispiel zeigt die Anwendung anhand einer Definitionsliste. Die dt-Elemente sollen als kompakte Box neben den dd-Elementen dargestellt werden, solange sie eine Länge von 6 em nicht überschreiten. Abbildung 7.11 zeigt, wie Opera 9 das Dokument anzeigt. Der Definitionsterm »Benutzer« passt in den Randbereich hinein, der zweite Definitionsterm hingegen nicht; er wird als Blockbox dargestellt und erzeugt einen Zeilenumbruch. Andere Browser wie leider auch aktuelle Safari- und Firefox-Versionen – vom Internet Explorer ganz zu schweigen – können mit kompakten Boxen nichts anfangen und zeigen die Definitionsliste in der Standarddarstellung.

dt {
  display: compact;
  font-weight: bold;
}
dd { margin: 0 0 .5em 6em; }


Abb. 7.11: Kompakte Boxen

Eine Run-in-Box ist eine spezielle Box, die sich wie folgt verhält: Folgt der Run-in-Box eine (nicht gefloatete und nicht absolut positionierte) Blockbox, wird die Run-in-Box zur ersten Inlinebox der Blockbox, andernfalls wird die Run-in-Box zu einer Blockbox.

dt {
  display: run-in;
  font-weight: bold;
  padding: 0 1em 0 0;
}

Auch bei Run-in-Boxen ist es leider so, dass kaum ein Browser sie so darstellt, wie in Abbildung 7.12 gezeigt.


Abb. 7.12: Run-in-Boxen

Inline-Elemente werden horizontal nebeneinander dargestellt, beginnend von oben in einem umschließenden Block. Der unsichtbare rechteckige Bereich, der eine Zeile Inline-Elemente enthält, wird Zeilenbox genannt.

Passen mehrere Inlineboxen nicht in eine einzelne Zeilenbox, weil der horizontal zur Verfügung stehende Platz nicht ausreicht (etwa weil das Browserfenster nicht groß genug oder die Breite des Elements auf einen kleineren Wert festgelegt ist), erfolgt ein Zeilenumbruch, und es werden so viele weitere Zeilenboxen eingefügt, wie notwendig sind, um alle Inlineboxen dazustellen.

Zum Seitenanfang

Boxtyp eines Elements: Die Eigenschaft display

Die Eigenschaft display gibt an, ob und mit welcher Art von Box ein Element dargestellt werden soll.

Werte inline, block, inline-block, list-item, marker, none, run-in, compact, table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inherit
Initialwert inline
Vererbung nein
Anwendung global
  • inline: Das Element wird als Inline-Element dargestellt, erzeugt also eine oder mehrere Inlineboxen. Dieser Wert ist zwar der Initialwert, jedoch wird er üblicherweise direkt durch das Browserstylesheet für Elemente wie Absätze (p), Überschriften (h1 bis h6), Container (div) oder Tabellen- und Listenelemente überschrieben.
  • block: Das Element wird als Blockelement dargestellt, erzeugt also eine Hauptblockbox.
  • inline-block: Das Element wird als Blockelement innerhalb der Textzeile dargestellt, also wie ein Inline-Element, hat aber ansonsten alle Eigenschaften eines Blockelements. Dieser Wert wurde in CSS 2.1 neu eingeführt.
  • list-item: Das Element wird als Listenpunkt dargestellt und erzeugt eine Hauptblockbox und eine inzeilige Listenelementbox. Beachten Sie: Die Deklaration display: list-item; ersetzt nicht die logische Auszeichnung von Listen in XHTML, sondern simuliert nur deren Darstellung.
  • marker: Dieser Wert deklariert über die Pseudoelemente :before und :after erzeugten Inhalt vor oder hinter einer Box als Markierung. Auf Markierungen wird in dieser Einführung nicht weiter eingegangen, da sie auch in modernen Browsern kaum oder gar nicht unterstützt werden.
  • none: Das Element erzeugt keine Box, verschwindet also aus der Darstellung des Dokuments. Dieser Wert wird oft in Kombination mit clientseitigen Scripts verwendet, um ein Element zunächst auszublenden und als Folge einer Benutzerinteraktion (zum Beispiel Klick auf einen Link) schließlich einzublenden, indem der display-Wert dynamisch geändert wird, meistens auf block.
  • run-in und compact: Es wird eine Run-in- beziehungsweise eine kompakte Box erzeugt, die sich abhängig vom Kontext entweder als Inline- oder als Blockbox darstellt. Der Wert compact wurde nicht in CSS 2.1 übernommen.
  • table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell und table-caption: Diese Werte dienen dazu, das Verhalten von Elementen als Element einer Tabelle zu simulieren. Die einzelnen Werte lassen sich, wie in Listing 7.2 aufgeführt, den XHTML-Tabellenelementen zuordnen. Bitte beachten Sie auch hier, dass dadurch keinesfalls die logische Auszeichnung von Inhalten mittels der XHTML-Tabellenelemente ersetzt werden kann.
table    { display: table;              }
tr       { display: table-row;          }
thead    { display: table-header-group; }
tbody    { display: table-row-group;    }
tfoot    { display: table-footer-group; }
col      { display: table-column;       }
colgroup { display: table-column-group; }
td, th   { display: table-cell;         }
caption  { display: table-caption;      }
Listing 7.2: XHTML-Elemente und die ihnen zugeordneten display-Werte

Browserunterstützung

Nur Opera ab Version 9 unterstützt alle Werte der Eigenschaft display.

Firefox
Firefox erkennt die Werte compact und run-in nicht.
Internet Explorer 6 und 7

Der IE bis Version 7 erkennt nicht die Werte inherit, inline-table, run-in, table, table-caption, table-cell, table-column, table-column-group, table-row, and table-row-group.

Die Werte table-footer-group und table-header-group erkennt er nur für die Elemente thead und tfoot.

Safari
Safari unterstützt den Wert compact nicht, der allerdings auch nicht Teil von CSS 2.1 ist.
Konqueror
Konqueror bis Version 3.5 erkennt die Werte run-in, compact und marker nicht.