CSS-Referenz
4. Box-Eigenschaften
- 4.1 width
- 4.2 max-width
- 4.3 min-width
- 4.4 height
- 4.5 max-height
- 4.6 min-height
- 4.7 margin
- 4.8 padding
- 4.9 border-width
- 4.10 border-style
- 4.11 border-color
- 4.12 border (Kurzform)
- 4.13 text-align
- 4.14 white-space
- 4.15 text-indent
- 4.16 line-height
- 4.17 vertical-align
Dieser Abschnitt beschreibt die Eigenschaften von Block- und Inline-Boxen.
4.1 width
Definiert die Breite von Blockelementen oder ersetzten Elementen [CSS1].
Beispiel:
#content {width: 80%;}
| Werte | Längenangabe | Prozentwert | auto | inherit |
| Default | auto |
| Vererbt | nein |
Prozentwerte werden in Bezug auf die Breite des umgebenden Elements bzw. Blocks errechnet.
Die Angabe negativer Werte ist nicht zulässig.
4.2 max-width
Definiert die maximale Breite eines Block-Elements [CSS2].
Beispiel:
#content {max-width: 90%;}
| Werte | Längenangabe | Prozentwert | none | inherit |
| Default | none |
| Vererbt | nein |
Die Angabe negativer Werte ist nicht zulässig.
Diese Eigenschaft wird vom IE/win (bis 6) nicht unterstützt.
4.3 min-width
Definiert die minimale Breite eines Block-Elements [CSS2].
Beispiel:
#content {min-width: 420px;}
| Werte | Längenangabe | Prozentwert | inherit |
| Default | 0 |
| Vererbt | nein |
Die Angabe negativer Werte ist nicht zulässig.
Diese Eigenschaft wird vom IE/win (bis 6) nicht unterstützt.
4.4 height
Definiert die Höhe eines Block-Elements [CSS1].
Beispiel:
#menue {height: 300px;}
| Werte | Längenangabe | Prozentwert (seit CSS2) | auto | inherit |
| Default | auto |
| Vererbt | nein |
Die Angabe negativer Werte ist nicht zulässig.
4.5 max-height
Definiert die maximale Höhe eines Block-Elements [CSS2].
Beispiel:
#menue {max-height: 300px;}
| Werte | Längenangabe | Prozentwert | none | inherit |
| Default | none |
| Vererbt | nein |
Die Angabe negativer Werte ist nicht zulässig.
Diese Eigenschaft wird vom IE/win (bis 6) nicht unterstützt.
4.6 min-height
Definiert die minimale Höhe eines Block-Elements [CSS2].
Beispiel:
#menue {min-height: 20%;}
| Werte | Längenangabe | Prozentwert | inherit |
| Default | 0 |
| Vererbt | nein |
Die Angabe negativer Werte ist nicht zulässig.
Diese Eigenschaft wird vom IE/win (bis 6) nicht unterstützt.
4.7 margin
Definiert den äußeren Abstand zu benachbarten Elementen. Der Wert kann für alle vier Seiten gleichzeitig angegeben werden (Kurzform), oder für jede Seite einzeln, von oben beginnend im Uhrzeigersinn: margin-top, margin-right, margin-bottom, margin-left [CSS1].
Beispiel:
#header {margin: 2em 1em;}, p {margin-left: 2em;}
| Werte | Längenangabe | Prozentwert | auto | inherit |
| Default | 0 |
| Vererbt | nein |
Der Margin-Bereich ist immer transparent.
4.8 padding
Definiert den Abstand zwischen Elementinhalt und dem Rahmen (border). Der Wert kann für alle
vier Seiten gleichzeitig angegeben werden (Kurzform), oder für jede Seite einzeln, von oben beginnend im Uhrzeigersinn: padding-top, padding-right, padding-bottom, padding-left [CSS1].
Beispiel:
#header {padding: 20px 10px;}, a {padding-left: 10px;}
| Werte | Längenangabe | Prozentwert | inherit |
| Default | 0 |
| Vererbt | nein |
Die Angabe negativer Werte ist nicht zulässig.
Der padding-Bereich übernimmt alle Hintergrund-Eigenschaften der Box.
4.9 border-width
Definiert die Breite des Rahmens. Der Wert kann für alle vier Seiten gleichzeitig angegeben werden (Kurzform), oder für jede Seite einzeln, von oben beginnend im Uhrzeigersinn: border-top-width, border-right-width, border-bottom-width, border-left-width [CSS1]
Beispiel:
#teaser {border-width: 5px 2px;}, #content {border-left-width: 2px;}
| Werte | Längenangabe | thin | medium | thick | inherit |
| Default | medium |
| Vererbt | nein |
Mit Angabe der Schlüsselwörter thin, medium und thick lässt sich die Rahmenstärke nicht wirklich zufriedenstellend kontrollieren.
4.10 border-style
Definiert den Stil des Rahmens. Der Wert kann für alle vier Seiten gleichzeitig angegeben werden (Kurzform), oder für jede Seite einzeln, von oben beginnend im Uhrzeigersinn: border-top-style, border-right-style, border-bottom-style, border-left-style [CSS1].
Beispiel:
#teaser {border-style: 5px 2px;}, #content {border-left-style: 2px;}
| Werte | none | hidden (seit CSS2) | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit |
| Default | none |
| Vererbt | nein |
none– kein Rahmen;hidden– entspricht none, wird aber höher gewichtet;dotted– gepunkteter Rahmen;dashed– gestrichelter Rahmen;solid– durchgehender Rahmen;double– doppelter durchgehender Rahmen;groove, ridge, inset und outset– diese Werte geben dem Rahmen ein 3D-Feeling. Die Optik variiert allerdings von Browser zu Browser.
IE/win behandelt den Wert dotted wie dashed.
4.11 border-color
Definiert die Farbe des Rahmens. Der Wert kann für alle vier Seiten gleichzeitig angegeben werden (Kurzform), oder für jede Seite einzeln, von oben beginnend im Uhrzeigersinn: border-top-color, border-right-color, border-bottom-color, border-left-color [CSS1].
Beispiel:
#teaser {border-color: #900;}, #content {border-left-color: #000;}
| Werte | Farbangabe | transparent | inherit |
| Default | abhängig vom color-Wert des Elements |
| Vererbt | nein |
4.12 border (Kurzform)
Ermöglicht das Zusammenfassen mehrerer Rahmen-Anweisungen. Auch hier können die Werte für alle vier Seiten gleichzeitig oder für jede Seite einzeln, von oben beginnend im Uhrzeigersinn: border-top, border-right, border-bottom, border-left angegeben werden [CSS1].
Beispiel:
#teaser {border: 1px solid #900;}, #content {border-left: 3px double #000;}
| Werte | Längenangabe | thin | medium | thick | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit | Farbangabe | transparent | inherit |
| Default | siehe einzelne Eigenschaften |
| Vererbt | nein |
Rahmen können vielseitig genutzt werden, auch als Schmuckelement, und lassen sich in einer Vielzahl von Variationen notieren.
4.13 text-align
Definiert die horizontale Ausrichtung von Inline-Elementen [CSS1].
Beispiel:
p.hinweis {text-align: center;}
| Werte | left | right | center | justify | inherit |
| Default | left (Schreibrichtung: ltr) | right (Schreibrichtung: rtl) |
| Vererbt | ja |
Vom Einsatz des Wertes justify (Blocksatz) ist abzuraten, da mangels kontrollierbarer Silbentrennung unschöne Lücken im Text entstehen können.
4.14 white-space
Legt fest, wie Zeilenumbrüche innerhalb von Elementen mit Text erfolgen sollen [CSS1].
Beispiel:
p.phone {white-space: nowrap;}
| Werte | normal | pre | nowrap | pre-wrap (CSS2.1) | pre-line (CSS2.1) | inherit |
| Default | normal |
| Vererbt | ja |
Zwar werden Leerräume im Dokument nach gewissen Regeln zusammengefasst, aber CSS definiert nicht genau, an welcher Stelle ein Zeilenumbruch zu erfolgen hat. Daher wird auch dies von verschiedenen Browsern sehr unterschiedlich behandelt. Ein Minuszeichen wird vom IE/win zum Beispiel als trennbares Zeichen behandelt, von Gecko-basierten Browsern jedoch nicht.
normal– mehrere aufeinanderfolgende Leerräume werden zusammengefasst, ein Zeilenumbruch erfolgt am Rand der umgebenden Box;pre– alle Leerräume werden dargestellt wie im Text eingegeben, also nicht zusammengefasst. Umbrüche erfolgen nur dort, wo es im Quelltext vorgesehen ist;nowrap– Leerräume werden wie bei normal zusammengefasst, im Quelltext angegebene Umbrüche werden jedoch unterdrückt;pre-wrap– mehrere aufeinanderfolgende Leerräume werden nicht zusammengefasst, Umbrüche erfolgen dort, wo es im Quelltext vorgesehen ist;pre-line– mehrere aufeinanderfolgende Leerräume werden zusammengefasst, Umbrüche erfolgen dort, wo es im Quelltext vorgesehen ist.
4.15 text-indent
Definiert den horizontalen Einzug der ersten Zeile eines Block-Elements [CSS1].
Beispiel:
p {text-indent: 1em;}
| Werte | Längenangabe | Prozentwert | inherit |
| Default | 0 |
| Vererbt | ja |
Ein negativer Wert ist zwar gestattet, wird aber nicht unbedingt korrekt interpretiert.
4.16 line-height
Bestimmt für Elemente mit Fließtext die Zeilenhöhe [CSS1].
Beispiel:
body {line-height: 1.5;}
| Werte | normal | Zahlenwert | Längenangabe | Prozentwert | inherit |
| Default | normal |
| Vererbt | ja |
Dies ist eine der wenigen CSS-Eigenschaften, bei der dem eigentlichen Wert keine Einheit zugeordnet werden muss. Verzichten Sie auf die Angabe einer Einheit, um bei Elementen, die zwar diese Eigenschaft erben, aber eine andere Schriftgröße zugewiesen bekommen, unschöne Überschneidungen zu vermeiden.
4.17 vertical-align
Bestimmt die vertikale Ausrichtung von Inline-Elementen [CSS1].
Beispiel:
td {vertical-align: middle;}
| Werte | baseline | sub | super | text-top | middle | text-bottom | Längenangabe | Prozentwert (beide seit CSS2) | top | bottom | inherit |
| Default | baseline |
| Vererbt | nein |
Außerhalb von Tabellen ist diese Eigenschaft leider nur wenig praxistauglich, da sie auf Inline-Elemente beschränkt ist. Es bleibt zu hoffen, dass künftige Entwicklungen auch eine bessere Kontrolle der vertikalen Positionierung von Block-Elementen ermöglichen.
baseline– die Grundlinie einer Box wird an der Grundlinie der Elternbox ausgerichtet;sub– die Grundlinie der Box wird auf einer passenden Position für tiefgestellten Text der Elternbox ausgerichtet;super– die Grundlinie der Box wird auf einer passenden Position für hochgestellten Text der Elternbox ausgerichtet;text-top– die Oberkante der Box wird an der Oberkante des Inhalts der Elternbox ausgerichtet;middle– die vertikale Mitte der Box wird auf der Grundlinie der Elternbox ausgerichtet (zuzüglich der halben x-Höhe des Elternelements);text-bottom– die Unterkante der Box wird an der Unterkante des Inhalts der Elternbox ausgerichtet;top, bottom– diese Werte richten ein Element jeweils oben oder unten am Rand der Zeilenbox aus.
Bei Längenangaben oder Prozentwerten wird die Box um den angegebenen (bzw. errechneten) Wert angehoben. Ist der Wert negativ, wird die Box abgesenkt. Der Wert 0 (Null) entspricht der Angabe baseline.
