Berechnen

width: calc(100% - 2px);

Längen

Einheit Name Größe
cm Zentimeter 1 cm = 37,8 Pixel (gerundet)
mm Millimeter 0,1 cm = 3,78 Pixel (gerundet)
Q Quarter-millimeters 1Q = 1/4mm
in Zoll 2,54 cm ≙ 96 Pixel
pc Pica 1/6 Zoll ≙ 16 Pixel
pt Punkt 1/72 Zoll ≙ 1,33 Pixel (gerundet)
ca. 0,3133 mm im Drucklayout
px Ein CSS-Pixel ist der sichtbare Bereich eines Pixel auf einem Gerät mit einer Punktdichte von 96 DPI und einer Armlänge Abstand vom Leser. variabel ≙ 0,75 Punkt = 1/96in

Relative Längenmaße

Relativ zur Schriftgröße

emSchriftgröße des Eltern-Elements, wenn es sich um typografische Eigenschaften wie font-size handelt, und Schriftgröße des Elements selbst, wenn es sich um andere Eigenschaften wie width handelt.
exentspricht der Größe des Kleinbuchstabens “x”. Sofern die verwendete Schriftart eine x-Höhe definiert, wird dieser Wert verwendet. Andernfalls entspricht ein ex genau einem halben em (0.5em).
chentspricht der Breite der Ziffer “0”. Sofern die verwendete Schriftart eine Null-Breite definiert, wird dieser Wert verwendet. Andernfalls wird versucht die durchschnittliche Breite aller Zeichen zu berechnen, sodass dieser Wert verwendet werden kann.
lhentspricht der line-height des Elements

Relativ zur Viewportgröße

vwentspricht 1% der Viewport-Breite
vhentspricht 1% der Viewport-Höhe
vbentspricht 1% der Viewportabmessung in Block-Richtung (bei horizontaler Schrift: vh; bei vertikaler Schrift: vw)
vientspricht 1% der Viewportabmessung in Inline-Richtung (bei horizontaler Schrift: vw; bei vertikaler Schrift: vh)
lvhentspricht 1% der Höhe des großen Viewports, d.h. wenn auf Mobilgeräten Adressleiste und Menüleiste nicht angezeigt werden
svhentspricht 1% der Höhe des kleinen Viewports, d.h. wenn auf Mobilgeräten Adressleiste und Menüleiste angezeigt werden und Platz beanspruchen
dvhentspricht 1% der Höhe des dynamischen Viewports
vminentspricht 1% der Viewport-Minimalabmessung (Breite oder Höhe, je nachdem, welcher Wert der kleinere ist)
vmaxentspricht 1% der Viewport-Maximalabmessung (Breite oder Höhe, je nachdem, welcher Wert der größere ist)
remEin rem (root-em =Wurzel-Em) entspricht der Schriftgröße, die für das Wurzelelement (in HTML das html-Element festgelegt wurde.
(Evtl. Änderungen der Schriftgröße in Elternelementen können so übersprungen werden.)

Relativ zum Containerelement

cqwentspricht 1% der Container-Breite
cqhentspricht 1% der Container-Höhe
cqbentspricht 1% der Container-Abmessung in Block-Richtung (bei horizontaler Schrift: cqh; bei vertikaler Schrift: cqw)
cqientspricht 1% der Container-Abmessung in Inline-Richtung (bei horizontaler Schrift: cqw; bei vertikaler Schrift: cqh)
cqminentspricht 1% der Container-Minimalabmessung (Breite oder Höhe, je nachdem, welcher Wert der kleinere ist)
cqmaxentspricht 1% der Container-Maximalabmessung (Breite oder Höhe, je nachdem, welcher Wert der größere ist)

Winkelmaße

Einheit Beschreibung Beispiel
deg Grad (°), Ein Vollwinkel, also eine Kreisumrundung, entspricht 360°. transform: rotate(45deg);
grad 100 grad (in der Mathematik als gon bekannt) entsprechen einer 90°-Drehung, also einem rechten Winkel. Eine Kreisumrundung entspricht somit 400 gon, also 400grad. rotate: 75grad;
rad Ein Radiant entspricht einer Drehung, bei dem der Winkel durch die Länge des entsprechenden Kreisbogens im Einheitskreis angegeben wird. Eine Kreisumrundung entspricht somit 2π rad. rotate: 2.5rad;
turn Ein Vollwinkel entspricht einer Kreisumrundung. rotate: .75turn;

Zeitmaße

Einheit Beschreibung
s Sekunde.
ms Eine Millisekunde entspricht dem 1000. Teil einer Sekunde.