Content-Breite: Die Eigenschaft width

Die Eigenschaft width gibt die Breite der Contentbox eines Blockelements oder eines solchen Elements an, dessen Dimensionen in CSS bereits bekannt sind (sogenannte replaced elements wie object, textarea oder img).

Sie können die Breite eines Elements durch Angabe einer Länge oder eines Prozentwerts bestimmen. Der Prozentwert wird relativ zur Breite des umschließenden Blocks berechnet, wenn diese explizit angegeben ist, ansonsten wird der Wert als auto interpretiert und in Abhängigkeit von verschiedenen Faktoren berechnet, die im Folgenden erläutert werden.

Breite und Ränder berechnen

Die tatsächliche Breite eines Elements ist nicht nur von der Eigenschaft width abhängig, sondern auch von der Art der Box, den Eigenschaften padding-right, padding-left, border-right, border-left, margin-right und margin-left sowie von der Standardkonformität des verwendeten Browsers.

Grundsätzlich gilt, dass Blockelemente

• stets den vollen horizontal zur Verfügung stehenden Raum einnehmen, wenn nichts anderes deklariert wurde, und
• sich ihre Gesamtbreite aus Content-Breite plus linke und rechte Padding-, Border- und Margin-Bereiche zusammensetzt.

Folgende Regel sorgt dafür, dass div-Elemente einen Raum von 502 Pixeln einnehmen:

div {
  width: 400px;
  border: 1px solid; /* 1px oben, rechts, unten und links */
  padding-left: 20px;
  padding-right: 20px;
  margin-left: 30px;
  margin-right: 30px;
}

Inline-Elemente verhalten sich anders als Blockelemente, auch in Bezug auf die berechnete Breite. Die Eigenschaft width wird auf Inline-Elemente nicht angewendet. Die berechnete Breite ist somit 0 beziehungsweise so groß, wie der Inhalt des Elements es erfordert. Die Angabe

span { width: 300px; }

bewirkt überhaupt nichts. Eine Ausnahme bilden sogenannte ersetzte Inline-Elemente, beispielsweise Bilder (img) oder Objekte (object), die Angaben zu Breite und Höhe bereits enthalten. Auf ersetzte Inline-Elemente wird die Eigenschaft width angewandt. Die Breite eines Bilds lässt sich mit

img { width: 280px; }

durchaus beeinflussen.

Blockelemente horizontal zentrieren

Wenn Sie über die Eigenschaft width eine Breite festlegen, die kleiner ist als der zur Verfügung stehende horizontale Raum, und zugleich margin-left und margin-right auf den Wert auto setzen, wird das Element horizontal zentriert. Dieses Verhalten ist einleuchtend, wenn Sie sich zwei Dinge vor Augen führen:

• Ein Blockelement füllt standardmäßig den vollen zur Verfügung stehenden Raum aus. Beträgt dieser beispielsweise 1.000 Pixel und setzen Sie die Breite eines Elements auf 400 Pixel, bleiben – davon ausgehend, dass border und padding auf 0 stehen – 600 Pixel Randbereich übrig.
• Mit der Eigenschaft auto für den Wert margin-left oder margin-right legen Sie fest, dass der Randbereich den Rest des zur Verfügung stehenden Raums einnehmen soll. Wenn beide Eigenschaften auf auto gesetzt werden, teilen sich linker und rechter Rand diesen Raum, in diesem Fall jeweils 300 Pixel.

Es wird Sie wohl kaum überraschen zu lesen, dass nicht standardkonforme Browser, also auch Browser im Quirks Mode, den Wert auto ignorieren. Dafür wenden sie die Eigenschaft text-align fälschlicherweise auch auf Blockelemente an, sodass Webautoren ein wenig tricksen können. In Listing 7.44 wird für div-Elemente eine Breite von 30 Prozent festgelegt und margin zugleich auf auto gesetzt. Für standardkonforme Browser würden diese Angaben reichen, um div-Elemente horizontal zu zentrieren. Fehlerhafte Browser hingegen benötigen die Angabe text-align: center; für den umschließenden Block – in diesem Beispiel das body-Element. Um zu verhindern, dass nun auch die Textinhalte zentriert werden, wird der Universalselektor dazu verwendet, alle Kinder von body (eigentlich: die Textinhalte aller Kinder von body) linksbündig zu setzen.

div {
  color: black;
  background-color: lime;
  width: 30%;
  margin: auto; /* Reicht eigentlich */
}
/* Für kaputte Browser */
body {
  /* Alle Inhalte horizontal zentrieren */
  text-align: center;
}
body * {
  /* Textausrichtung korrigieren */
  text-align: left;
}

Es ist durchaus legitim, auf fehlerhafte, veraltete Browser keine Rücksicht zu nehmen, solange der Nutzer dadurch nicht merklich eingeschränkt wird. Ob Blöcke nun zentriert dargestellt werden oder nicht, ist eine kosmetische Frage und hat keinen Einfluss auf die Gebrauchstauglichkeit der Seite.

Zum Seitenanfang

Mindestbreite: Die Eigenschaft min-width

Die Eigenschaft min-width legt die Mindestbreite der Contentbox eines Blockelements oder eines solchen Elements fest, dessen Dimensionen in CSS bereits bekannt sind.

Prozentwerte werden relativ zur Breite des umschließenden Blocks berechnet.

Zum Seitenanfang

Maximalbreite: Die Eigenschaft max-width

Die Eigenschaft max-width legt die Maximalbreite der Contentbox eines Blockelements oder eines solchen Elements fest, dessen Dimensionen in CSS bereits bekannt sind.

Der Initialwert ist browserabhängig. Bei Angabe des Werts none wird keine Maximalbreite festgelegt. Prozentwerte werden relativ zur Breite des umschließenden Blocks berechnet.

Zum Seitenanfang

Content-Höhe: Die Eigenschaft height

Die Eigenschaft height gibt die Höhe der Contentbox eines Blockelements oder eines solchen Elements an, dessen Dimensionen in CSS bereits bekannt sind.

Sie können die Höhe eines Elements analog zur Breite durch Angabe einer Länge oder eines Prozentwerts bestimmen. Standardmäßig wird die Höhe in Abhängigkeit von verschiedenen Faktoren berechnet, die im Folgenden erläutert werden.

Höhe und Ränder berechnen

Wie die tatsächliche Breite eines Elements ist auch dessen tatsächliche Höhe unter anderem von der Art der Box und deren Padding-, Border- und Margin-Bereichen abhängig. Zunächst ist davon auszugehen, dass Blockelemente

• stets nur so hoch sind, wie es die Boxen, die sie enthalten, erfordern, wobei fließende und absolut positionierte Boxen ignoriert werden, und
• sich ihre Gesamthöhe aus der Content-Höhe zuzüglich der oberen und unteren Padding-, Border- und Margin-Bereiche zusammensetzt.

Die verschiedenen Browser verhalten sich unterschiedlich, wenn Sie die Höhe einer Box mittels height einschränken. Im folgenden Beispiel wird die Höhe des div-Elements auf 50 Pixel und die Breite zugleich auf 200 Pixel beschränkt. Dadurch ist die Box kleiner, als es ihr Inhalt (bei Normalschriftgröße) erfordert. Während einige Browser wie ältere Versionen des Internet Explorers die Box vertikal auf die Höhe erweitern, die der Elementinhalt benötigt, halten sich andere Browser wie Firefox an die vorgegebenen Werte und lassen den Inhalt aus der Box hinauslaufen (siehe Abbildung 7.26).

div {
  color: black;
  background-color: lime;
  width: 200px;
  height: 50px;
}

Abb. 7.26: Herauslaufende Inhalte

Analog zur Eigenschaft width wird height auf Inline-Elemente im Allgemeinen nicht angewendet, es sei denn, es handelt sich um ersetzte Inline-Elemente.

Zum Seitenanfang

Mindesthöhe: Die Eigenschaft min-height

Die Eigenschaft min-height legt die Mindesthöhe der Contentbox eines Blockelements oder eines solchen Elements fest, dessen Dimensionen in CSS bereits bekannt sind.

Elemente sind standardmäßig so hoch, wie ihr Inhalt es erfordert. Elemente ohne Inhalt sind somit 0 Pixel hoch, was auch der Initialwert für die Eigenschaft min-height ist.

Prozentwerte werden relativ zur Höhe des umschließenden Blocks berechnet, wenn diese explizit angegeben ist, ansonsten wird der Wert als 0 interpretiert.

Zum Seitenanfang

Maximalhöhe: Die Eigenschaft max-height

Die Eigenschaft max-height legt die Maximalhöhe der Contentbox eines Blockelements oder eines solchen Elements fest, dessen Dimensionen in CSS bereits bekannt sind.

Der Initialwert ist browserabhängig. Bei Angabe des Werts none wird keine Maximalhöhe festgelegt. Prozentwerte werden relativ zur Höhe des umschließenden Blocks berechnet, wenn diese explizit angegeben ist, ansonsten wird der Wert als none interpretiert.

Zum Seitenanfang

Der Boxmodell-Bug

Im Quirks Mode gelten die einfachen Gleichungen »Gesamtbreite gleich Content-Breite plus linke und rechte Padding-, Border- und Margin-Bereiche« und »Gesamthöhe gleich Content-Höhe plus obere und untere Padding-, Border- und Margin-Bereiche« nicht. Während standardkonforme Browser width und height tatsächlich gemäß den Standards nur auf die Contentbox anwenden und Padding-, Border- und Margin-Bereiche addieren, interpretieren Browser wie der Internet Explorer im Quirks Mode width und height als Breite beziehungsweise Höhe des Content-, Padding und Border-Bereichs und addieren lediglich den Margin-Bereich. Abbildung 7.27 zeigt den Unterschied.

Abb. 7.27: Der CSS-Boxmodell-Bug in veralteten Browsern

Dies führt in diesen Browsern natürlich schnell zu falsch berechneten Werten. Den klassischen Fall demonstriert folgendes Beispiel. Die Eigenschaft width wird auf 100% gesetzt, hier für ein div-Element; in der Praxis geschieht dies jedoch häufig für Elemente, die sich im Gegensatz zu div-Elementen standardmäßig nicht über die volle Breite erstrecken, etwa Tabellen. Zusätzlich wird eine Polsterung von 20 Pixeln definiert.

div {
  color: black;
  background-color: lime;
  width: 100%;
  padding: 20px;
}

Abb. 7.28: Korrekte Darstellung im Firefox oben, falsche (wenngleich eher erwartungsgemäß aussehende) Darstellung im Internet Explorer 5 unten

Davon ausgehend, dass border und margin auf 0 gesetzt sind, spannt das Element somit eigentlich eine Breite von 100 Prozent plus 40 Pixeln auf; in den meisten Fällen kommt es damit entweder zu ungewollten Überlappungen, einem verschobenen Layout oder gar zu horizontalen Scrollbalken, wie in Abbildung 7.28 zu sehen. Im Quirks Mode wird das Dokument scheinbar korrekt angezeigt, das heißt so, wie es ein unerfahrener CSS-Autor vielleicht erwartet.

Um dieses Problem zu umgehen, bleibt Ihnen nur die Möglichkeit, den Abstand auf andere Art zu erzeugen, etwa indem Sie ein Kindelement hinzufügen und padding oder margin (je nachdem, was im Einzelfall geeigneter ist) für dieses Element setzen.

Der Boxmodell-Bug tritt natürlich auch bei der Verwendung absoluter Längen auf, ist dann aber verhältnismäßig einfach zu beheben. Angenommen, das relevante CSS sähe wie folgt aus:

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  margin: 10px;
}

Die korrekte Gesamtbreite beträgt 260 Pixel, die korrekte Gesamthöhe 160 Pixel. Fehlerhafte Browser stellen das Element jedoch nur 220 Pixel breit und 120 Pixel hoch dar. Um die richtigen Maße zu erreichen, müssen diese Browser also größere Werte für width und height zugewiesen bekommen, hier 240px und 140px. Dabei gehen Sie wie folgt vor: Sie deklarieren zunächst die falschen Werte. Danach machen Sie sich zunutze, dass alle Browser, die das Boxmodell falsch berechnen, mit Maskierung nichts anfangen können, und notieren jeweils in einer eigenen Regel den richtigen Wert, wobei Sie einen Buchstaben der entsprechenden Eigenschaft maskieren. Beachten Sie dabei, dass das Maskierungszeichen in diesem Hack nicht vor den Zeichen »a« bis »f« und »0« bis »9« stehen darf. Fehlerhafte Browser bekommen die korrigierten Werte nicht mit, standardkonforme hingegen schon, womit Sie browserübergreifend die gewünschten Maße erreichen.

div {
  width: 240px;
  height: 140px;
  padding: 20px;
  margin: 10px;
}
div {
  w\idth: 200px;
  he\ight: 100px;
}

Zum Seitenanfang

Höhe der Zeilenbox: Die Eigenschaft line-height

Die Breite einer Zeilenbox wird durch den umgebenden Block bestimmt. Die Höhe wird wie folgt berechnet:

1. Die Höhe und vertikale Position (siehe Kapitel 7.6.1 »Vertikale Ausrichtung: Die Eigenschaft vertical-align«) jeder Inlinebox in der Zeilenbox wird berechnet.
2. Die Höhe der Zeilenbox ist der Abstand zwischen der oberen Kante der oberen Box und der unteren Kante der untersten Box.

Über die Eigenschaft line-height lässt sich die Höhe der Zeilenboxen eines Elements indirekt dadurch beeinflussen, dass die Höhe der Inlineboxen bestimmt wird.

Wie die Eigenschaft line-height auf ein Element angewendet wird, ist abhängig davon, um welche Art von Element es sich handelt. Ist die Eigenschaft für ein Blockelement gesetzt, gibt sie die Mindesthöhe jeder erzeugten Inlinebox an. Ist sie für ein nicht ersetztes Inline-Element gesetzt, gibt sie die exakte Höhe jeder Box an, die von dem Element erzeugt wird.

Auf diese Weise ist line-height für nicht ersetzte Inline-Elemente das Äquivalent zur Eigenschaft height für Block- und ersetzte Inline-Elemente.

Die Eigenschaft line-height kann als Teil der zusammenfassenden Eigenschaft font notiert werden (siehe Kapitel 7.3.6).

Die Zeilenhöhe ist browserabhängig. Die meisten Browser verwenden das 1,2-Fache der Schriftgröße oder etwas weniger. Wenn Sie eine Zahl angeben (beispielsweise line-height: 2;), ist der berechnete Wert die angegebene Zahl multipliziert mit der Schriftgröße des Elements. Bei einer Prozentangabe wird analog der Prozentwert mit der Schriftgröße des Elements multipliziert.

Die folgenden drei Regeln ergeben dieselbe Zeilenhöhe:

div { line-height: 1.5em; } /* Länge*/
    
div { line-height: 1.5; } /* Zahl */

div { line-height: 150%; } /* Prozent */

Der von Browsern voreingestellte Standardwert ist im Allgemeinen zu klein, um eine optimale Lesbarkeit auf dem Bildschirm zu gewährleisten. Ich empfehle Ihnen daher, die Zeilenhöhe bereits für das Element body hochzusetzen, am besten auf einen Wert zwischen 150 und 170 Prozent.