CSS-Einheiten

CSS-Einheiten

CSS hat verschiedene Einheiten zur Angabe von Längen.

Viele CSS-Eigenschaften akzeptieren "Längen"-Werte wie z.B. width,margin,padding,font-size u.a.

Die Länge ist eine Zahl, die eine Längenmaßfolge folgt, wie z.B. 10px,2em u.a.

Beispiel

Verwenden Sie px (Pixel) zur Festlegung verschiedener Längenwerte:

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

Probieren Sie es selbst aus!

Zwischen der Zahl und der Einheit dürfen keine Leerzeichen vorhanden sein. Wenn der Wert jedoch 0 ist, kann die Einheit weggelassen werden.

Für einige CSS-Attribute ist die Verwendung negativer Längen erlaubt.

Es gibt zwei Arten von Längenmaßen:Absolute EinheitenundRelative Einheiten.

Absolute Länge

Absolute Längenmaße sind fest und die Länge, die durch eine beliebige absolute Länge angegeben wird, wird genau in dieser Größe angezeigt.

Absolute Längenmaße sollten auf dem Bildschirm nicht verwendet werden, da die Bildschirmgrößen stark variieren. Wenn jedoch das Ausgabemedium bekannt ist, können sie verwendet werden, z.B. für Drucklayout (Printlayout).

Einheit Beschreibung TIY
cm Zentimeter Versuchen Sie es aus!
mm Millimeter Versuchen Sie es aus!
in Zoll (1in = 96px = 2.54cm) Versuchen Sie es aus!
px * Pixel (1px = 1/96 von 1in) Versuchen Sie es aus!
pt Punkt (1pt = 1/72 von 1in) Versuchen Sie es aus!
pc Pica (1pc = 12 pt) Versuchen Sie es aus!

* Pixel (px) sind relativ zum Anzeigegerät. Für Geräte mit niedriger dpi ist 1px ein Gerätspixel (Punkt) auf dem Bildschirm. Für Drucker und hochauflösende Bildschirme bedeutet 1px mehrere Gerätspixel.

Relative Länge

Relative Längenmaße definieren die Länge relativ zu einer anderen Längenattribute. Relative Längenmaße skalieren besser zwischen verschiedenen Renderingmedien.

Einheit Beschreibung TIY
em Relativ zur Schriftgröße des Elements (font-size) (2em bedeutet die 2fache aktuelle Schriftgröße) Versuchen Sie es aus!
ex Relativ zur x-height der aktuellen Schrift (wenig verwendet) Versuchen Sie es aus!
ch Relativ zu "0" (Null) Versuchen Sie es aus!
rem Relativ zur Schriftgröße des Wurzelelements (font-size) Versuchen Sie es aus!
vw Relativ zur Breite des Ansichtsbereichs um 1% Versuchen Sie es aus!
vh Relativ zur Höhe des Ansichtsbereichs um 1% Versuchen Sie es aus!
vmin Relativ zur kleineren Größe des Ansichtsbereichs um 1% Versuchen Sie es aus!
vmax Relativ zur größeren Größe des Ansichtsbereichs um 1% Versuchen Sie es aus!
% Relativ zum Elternelement Versuchen Sie es aus!

Tipp:Em und rem-Einheiten können verwendet werden, um perfekte skalierbare Layouts zu erstellen!

* Ansichtsbereich (Viewport) = Größe des Browserfensters. Wenn der Ansichtsbereich 50 breit ist, dann 1vw = 0.5cm.

Browserunterstützung

Die Zahlen in der Tabelle weisen auf die erste Browserversion hin, die diese Längenmaß vollständig unterstützt.

Längenmaß
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0