Cascading Stylesheets Stil mit <Stil>

CSS2-Referenz | HTML-4.01-Referenz | Farben, Zeichen und Maße | Workshop | Externe Links | Impressum | Hinweise

# Dimension – Eigenschaften für die Abmessungen von Elementen

Eigenschaften, die die horizontale und vertikale Abmessung eines Elements bestimmen, z.B. die Höhe und Breite eines Absatzes, einer Tabelle, eines <div>-Containers und außerdem auch die Zeilenhöhe. Acht Eigenschaften sind insgesamt für die Dimensionierung von Elementen spezifiziert.

height • width • line-height • max-height • max-width • min-height • min-width • vertical-align

## height

IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein | height bestimmt die Höhe eines Text- oder Bildelements. Wenn die Höhe eines Bildes auf einen Wert gesetzt ist und die Breite als auto angegeben wird, wird das Bild proportional skaliert (das Seitenverhältnis bleibt erhalten). | length | percentage | auto

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

percentage (Prozentsatz) basiert auf der vollen Elementhöhe, die als 100% definiert ist.

auto ist die Voreinstellung und weist den Browser an, die Höhe automatisch zu berechnen. Wenn sowohl Höhe als auch Breite auf auto gesetzt werden, bleiben die Dimensionen des Text- oder Bildelements unverändert. Durch die Angabe von auto wird auch sichergestellt, dass keine vorangegangenen Deklarationen die Höhe des Elements beeinflussen.

#### Beispiel 1

    img { height: 150mm; }
    img { height: 2.85in; }
    img { height: 45pc; }
    img { height: 36pt; }
    img { height: 50%; }
    img { height: auto; }
    img { height: 3.0in; width: auto }
    oder

    <img src="css_beispiele/fliege.gif">
    <img src="css_beispiele/fliege.gif" style="height:80px; width:auto;">

#### Darstellung

Beispiel 2

    <p style="height: 200px; width: 50%;
              background-color: #949C94">
    Hier steht ein 200 Pixel hoher Absatz
    vor einem grünen Hintergrund.
    Wird die Breite hier in Prozent angegeben,
    bezieht sie sich nicht auf die Breite
    des Textelements, sondern auf die Breite
    des umfassenden Blocks.</p>

#### Darstellung

Hier steht ein 200 Pixel hoher Absatz vor einem grünen Hintergrund. Wird die Breite hier in Prozent angegeben, bezieht sie sich nicht auf die Höhe des Textelements, sondern auf die Breite des umfassenden Blocks.

↑

## width

IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein | width gibt die Breite eines Elements an. Wird die Breite eines Elements angegeben und die Höhe durch auto spezifiziert, wird das Element proportional skaliert (das Seitenverhältnis bleibt erhalten). | length | percentage | auto

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

percentage (Prozentsatz) basiert auf der vollen Elementbreite, die als 100% definiert ist.

auto ist die Voreinstellung und weist den Browser an, die Breite automatisch zu berechnen. Wenn sowohl Breite als auch Höhe auf auto gesetzt sind, bleiben die Abmessungen eines Textes oder Bildes unverändert. Durch die Deklaration von auto kann sichergestellt werden, dass keine vorangegangenen Deklarationen die Breite des Elements beeinflussen.

#### Beispiel

    img { width: 150mm; }
    img { width: 2.85in; }
    img { width: 45pc; }
    img { width:  36pt; }
    img { width: 140%; }
    img { width: auto; }
    img { width:  3.0in;
    height:  auto } oder

    <img src="css_beispiele/fliege.gif">
    <img src="css_beispiele/fliege.gif"
              style="width: 55px; height: auto;">

#### Darstellung

Das zweite Bild wird mit einer kleineren Breite eingesetzt. Da die Höhe durch "auto" deklariert ist, bleibt das Seitenverhältnis erhalten.

↑

## line-height

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Ja | line-height beschreibt den Abstand zwischen aufeinander folgenden Zeilen. Der Abstand hängt von der Schriftgröße ab. | normal | number | length | percentage

normal ist die Voreinstellung. Die Deklaration von normal stellt sicher, dass vorangegangene Deklarationen die Zeilenhöhe nicht beeinflussen.

number ist ein Faktor, mit dem die Schriftgröße multipliziert wird, um die Zeilenhöhe zu berechnen.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

percentage basiert auf der normalen Zeilenhöhe, die als 100% angesetzt wird. Ein Prozentwert, der kleiner ist als 100%, verringert die Zeilenhöhe, die Angabe von 100% bewirkt keine Änderung und ein Wert, der größer als 100% ist, erhöht die Zeilenhöhe.

#### Beispiel

    p { line-height: normal; } p { line-height: 1.25; }
    br { line-height: 1.5in; }
    blockquote { line-height: 85%; } oder

    <span style="line-height: 60px;">
    Hier ist <br>
    richtig viel Platz!
    </span>

#### Darstellung

Hier ist
richtig viel Platz!

↑

## max-height

Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein | max-height bestimmt die maximale Höhe eines Elements. max-height gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden. | none | length | percentage

Wenn ein Wert für max-height angegeben wird, der kleiner als eine vorangegangene Angabe für min-height für das Element ist, wird max-height auf den gleichen Wert wie min-height gesetzt. Wenn der angegebene Wert für min-height größer als der Wert für height des gleichen Elements ist, wird die Höhe des Elementes auf min-height gesetzt.

none ist die Voreinstellung und gibt an, dass keine Einschränkungen bezüglich der Höhe des Elements gelten.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

percentage (Prozentsatz) gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

#### Beispiel

    p {max-height: 20px;}
    p {max-height: 200%;}

#### Darstellung

Dieser Absatz soll höchstens 20 Pixel hoch sein!
Eine zweite Zeile sollte nicht mehr in den Absatz passen.
Eine dritte Zeile auch nicht.

↑

## max-width

Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein | max-width gibt die maximale Breite eines Elements an. max-width gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden. | none | length | percentage

Wenn max-width kleiner als ein zuvor spezifizierter Wert für min-width ist, wird max-width auf den Wert von min-width gesetzt. Wenn min-width größer als der Wert width für das gleiche Element ist, wird width auf den Wert von min-width gesetzt.

none bestimmt, dass keine Beschränkung für width besteht.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

percentage (Prozentsatz) gibt die Elementhöhe als Prozentsatz der Breite des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

#### Beispiel

    p {max-width: 210px;}
    p {max-width: 200%;}

↑

## min-height

Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein | min-height gibt die minimale Höhe eines Elements an. min-height gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden. | length | percentage

Wenn max-height kleiner als ein zuvor definierter Wert für min-height ist, wird max-height auf den Wert von min-height gesetzt. Wenn der Wert für min-height größer als der aktuelle Wert für height ist, wird height auf den Wert von min-height gesetzt.

length kann in einer der folgenden Maßeinheiten angegeben werden (Voreinstellung ist 0):

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

percentage (Prozentsatz) gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

#### Beispiel

    p {min-height: 175px;}
    p {min-height: 200%;}

↑

## min-width

Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein | min-width gibt die minimale Breite eines Elements an. max-height gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden. | length | percentage

Wenn max-width kleiner als ein zuvor definierter Wert für min-width ist, wird max-width auf den Wert von min-width gesetzt. Wenn der Wert für min-width größer als der aktuelle Wert für width ist, wird width auf den Wert von min-width gesetzt.

length kann in einer der folgenden Maßeinheiten angegeben werden (Voreinstellung ist 0):

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

percentage (Prozentsatz) gibt die Elementhöhe als Prozentsatz der Breite des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

#### Beispiel

    p {min-width: 94px;}
    p {min-width: 150%;}

↑

## vertical-align

IE4+ M1 N4+ O5+ Version: CSS1 mit Erweiterungen in CSS2 Erblich: Nein | vertical-align richtet Buchstaben, Wörter, Bilder und Texte an einer Grundlinie aus, die anhand eines Buchstabens, eines Wortes oder Textes bestimmt wird. | baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage | length

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

#### Beispiel

    .ibaseline {vertical-align: baseline;}
    .ibottom {vertical-align: bottom;}
    .imiddle {vertical-align: middle;}
    .isub { vertical-align: sub; }
    .isuper { vertical-align: super; }
    .itext-bottom { vertical-align: text-bottom; }
    .itext-top { vertical-align: text-top; }
    .itop { vertical-align: top; }
    .prozent { vertical-align: -15%; }
    .minuspix { vertical-align: -10px; }
    .plusem { vertical-align: 0.5em; }
    .plusmm { vertical-align: 1mm; }
    ...
    <body>
    <p>Die Fliege <img src="css_beispiele/fliege.jpg"
                    width="28" height="33" class="ibaseline">
                    auf der Zeile</p>
    ...

↑

aural Stile für die Sprachausgabe

border Stile für die Gestaltung eines Rahmens um ein Element

color und background Stile für die Vordergrundfarbe und Hintergrundgestaltung

content Stile für automatisch generierten Inhalt

dimension Stile für die Abmessungen und Ausrichtung von Elementen

font Stile für die Schriftgestaltung

lists and markers Stile für Aufzählungen und Listen

margin Stile für den Abstand eines Elements gegen umgebende Elemente

padding Stile für den inneren Abstand zum Element

paged media Stile für den Druck

positioning Stile für die Positionierung

Pseudoklassen und Pseudoelemente Stile für die Gestaltung von Pseudolinks und Pseudoelementen

table Stile für die Gestaltung von Tabellen

text Stile für die Absatzgestaltung

user interface Stile für die Gestaltung der Benutzeroberfläche durch Rahmen und Mauszeiger

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen