Absolute und relative Maßeinheiten

Maßeinheiten sind in CSS sehr wichtig. Durch sie wird nicht nur die Größe von Elementen definiert, sondern auch deren Position auf der Webseite. Maßeinheiten können in CSS entweder absolut oder relativ angegeben werden. Achtung: Bei numerischen Werten benutzt man einen Punkt, nicht ein Komma: also 1.75cm und nicht 1,75cm.

Absolute Werte definieren eine Größe, die von deren Umgebung unabhängig ist. Die folgenden absoluten Maßeinheiten werden von allen gängigen Browsern unterstützt:

cm

Zentimeter

font-size: 2cm;
top: 3.5cm;

in

Inch (1 Inch = 2.54 Zentimeter)

border-width:0.5in;
margin-left:5in;

mm

Millimeter

margin-bottom:7mm;
width:50mm;

pt

Punkt (1 Punkt = 1/72 Inch)

font-size:14pt;
line-height:17pt;

pc

Pica (1 Pica = 12 Punkt)

font-size:3pc;
line-height:2.3pc;

Relative Werte definieren eine Größe, die von deren Umgebung abhängig ist. Die folgenden relativen Maßeinheiten werden von allen gängigen Browsern unterstützt:

em

Der Wert bezieht sich auf die Schriftgröße des jeweiligen Elements. Außer dieser hat die gleiche Maßangabe, dann richtet sich der Wert nach dem übergeordneten Element und dessen Größe.

font-size:2.3em;
line-height:2.8em;

ex

Dieser Wert bezieht sich auf die Höhe des Kleinbuchstaben x des jeweiligen Elements. Außer die font-size-Eigenschaft hat die gleiche Maßangabe, dann richtet es sich nach dem übergeordneten Element und dessen Höhe des Kleinbuchstaben x.

font-size:1.3ex;

px

px steht für Pixel. Die Darstellung ist abhängig von der Pixeldichte des Ausgabegeräts. Das heißt relativ also von Ausgabegerät zu Ausgabegerät und absolut ist es auf ein und das selbe Ausgabegerät bezogen.

font-size:13px;
line-height:17px;

%

% steht für Prozent und verhält sich relativ zur im Element definierten Größe, zu der des Elternelements oder zu der obersten Definition. Bei dem Beispiel bezieht sich die Zeilenhöhe (line-height) relativ zur Schriftgröße (font-size).

font-size:16pt;
line-height:120%;