zum Artikelanfang springen

CSS-Referenz

4. Box-Eigenschaften

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.

^ nach oben

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.

^ nach oben

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.

^ nach oben

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.

^ nach oben

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.

^ nach oben

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.

^ nach oben

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.

^ nach oben

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.

^ nach oben

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.

^ nach oben

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.

^ nach oben

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

^ nach oben

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.

^ nach oben

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.

^ nach oben

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.

^ nach oben

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.

^ nach oben

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.

^ nach oben

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.

Seitenanfang

(c) 2009 e-workers
http://www.css-cafe.de/
mailto: info@css-cafe.de