CSS Maße

Für die Maßangabe werden zwei Komponenten benötigt, eine Zahl und die Maßeinheit.

Zahlen können positive und negative ganze Zahlen sein (-3, 0, 10), oder auch Kommazahlen (1.54). Achtung, Punkt statt Komma. Bei dem Wert 0 muss keine Maßeinheit angegeben werden.

Die Maßeinheiten werden in absolute und relative Maßangaben unterteilt. Ich selbst arbeite hautpsächlich mit "em", "rem" und "%", und recht selten mal mit "px" und den Viewportangaben wie "vh".

Absolute

Die Werte sind festgemeiselt, und beziehen sich nicht auf etwaige andere (Umgebungs-) Werte. Achtung, es kommt auf die Auflösung des Bildschirmes an, da alles in Pixel umgerechnet wird. Daher wird heutzutage für Webseiten fast ausschließlich mit relativen Werten gearbeitet.

px
Pixel, Punkte auf dem Bildschirm
in
Inch = 96px
pc
Pica = 16 Pixel
pt
Points = 1,33px
cm
Zentimeter = 37,8px
mm
Millimeter = 3,78px

Realtive Werte

Relative Werte haben immer eine Bezugsgröße. Im Normalfall beziehen sie sich auf das Element, indem sie sich befinden.

em
Bezug auf die Schriftgröße des Elternelementes. 1em entspricht der Breite des Buchstaben M.
ex
Wie em, statt M aber x.
ch
Wie em, statt M aber 0.
rem
Entspricht em, aber immer bezogen auf die Schriftgröße von <html>,
%
Prozent der Schrift, Breite oder Höhe des Elternteils.
vw
Prozent der Breite des Viewports (Sichtbereiches).
vh
Prozent der Breite des Viewports (Sichtbereiches).
vmin
Prozent der Breite oder Höhe des Viewports (Sichtbereiches), je nachdem was kleiner ist.
vmax
Prozent der Breite oder Höhe des Viewports (Sichtbereiches), je nachdem was größer ist.

CodeZone

CSS

HTML

Auf Testzone anwenden