Zurück: Positionierung von Elementen
Weiter: Anzeige von Elementen

Breiten und Höhen

width

Mit der Eigenschaft width bestimmen Sie die Breite des Content-Bereiches eines Elementes.

auto
<Länge>
<Prozent>
inherit
  • Beachten Sie, dass nur Block-Elemente und solche Elemente, deren Dimensionen in CSS bereits bekannt sind (so genannte »replaced elements«) über einen Content-Bereich verfügen. Letzteres sind Elemente wie object, textarea oder img.
  • Dadurch, dass width sich nur auf den Content-Bereich bezieht, führt die Deklaration width:100% zu horizontalen Scrollbalken, wenn Padding-Bereich, Border-Bereich oder Margin-Bereich ungleich 0 sind.
min-width

Mit der Eigenschaft min-width bestimmen Sie eine Mindestbreite des Content-Bereiches eines Elementes.

<Länge>
<Prozent>
inherit

Der Initialwert ist abhängig vom User-Agent.

max-width

Mit der Eigenschaft max-width bestimmen Sie eine Maximalbreite des Content-Bereiches eines Elementes.

none
<Länge>
<Prozent>
inherit

Folgendes Beispiel demonstriert die Wirkung der beiden Eigenschaften, die leider nicht jeder der aktuellen Browser interpretiert.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>'max-width' und 'min-width'</title>

<style type="text/css">
p {
   border: 1px solid black;
   background-color: green;
}
#eins {
   max-width: 400px;
}
#zwei {
   min-width: 400px;
}
</style>
</head>

<body>

<p id="eins">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>

<p id="zwei">Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore
te feugait nulla facilisi.</p>

</body>
</html>

Beispieldokument ansehen

height

Mit der Eigenschaft height bestimmen Sie die Höhe des Content-Bereiches eines Elementes.

auto
<Länge>
<Prozent>
inherit
  • Dadurch, dass height sich nur auf den Content-Bereich bezieht, führt die Deklaration height:100% zu horizontalen Scrollbalken, wenn Padding-Bereich, Border-Bereich oder Margin-Bereich ungleich 0 sind.
min-height

Mit der Eigenschaft min-height bestimmen Sie die Mindesthöhe des Content-Bereiches eines Elementes.

<Länge>
<Prozent>
inherit

Der Initialwert ist 0.

max-height

Mit der Eigenschaft max-height bestimmen Sie die Maximalhöhe des Content-Bereiches eines Elementes.

none
<Länge>
<Prozent>
inherit
line-height
  • Die Höhe einer Zeilen-Box wird wie folgt bestimmt:
    1. Die Höhe jeder Inline-Box und deren Ausrichtung innerhalb der Zeilen-Box wird berechnet.
    2. Die Höhe der Zeilen-Box entspricht der Entfernung von der tiefsten Kante der Inline-Boxen zur höchsten.

Mit der Eigenschaft line-height können Sie die Höhe der Zeilen-Box verändern.

normal
<Länge>
<Prozent>
<Zahl>
Bestimmt einen Multiplikator zu der Schriftgröße des Elementes, wodurch dann die Zeilenhöhe berechnet wird.
inherit

Wenn Sie line-height für ein Block-Element festlegen, bestimmen Sie die minimale Zeilenhöhe aller darin generierten Zeilen-Boxen. Wenn Sie diese Eigenschaft für ein Inline-Element deklarieren, bestimmen Sie die exakte Höhe der von diesem Element generierten Box.

Folgende Deklarationen bewirken die gleiche Zeilenhöhe:

p { line-height: 1.2;   }
p { line-height: 1.2em; }
p { line-height: 120%;  }

Zurück: Positionierung von Elementen
Weiter: Anzeige von Elementen
Zum Seitenanfang