Absolute & relative Maßeinheiten in CSS

Wenn man mit der Auszeichnungssprache CSS arbeitet, kommt man recht schnell zu dem Punkt, an dem man sich mit den verfügbaren Maßeinheiten beschäftigen sollte. Denn Maßeinheiten sind im Umgang mit CSS von enormer Wichtigkeit. Durch sie wird nicht nur die Größe von Elementen definiert, sondern auch deren Position im HTML-Dokument. Hierbei gibt es einiges zu beachten, also schauen wir uns heute diese Maßeinheiten und deren Beziehung zu umgebenden Elementen an.

Was bedeutet das? Nun, Maßeinheiten können in CSS entweder absolut (manchmal auch physisch genannt) oder relativ zu den umgebenden Elementen angegeben werden. Der Unterschied ist folgender, die absoluten Angaben beziehen sich auf fest vorgegebene Definitionen, z.B. auf eine Höhenangabe in Millimetern, welche exakten Vorgaben folgen. Sinn ist hier, dass die Anzeige überall möglichst gleich ausgegeben wird.

Die relativen Maßangaben hingegen, resultieren aus den Gegebenheiten des Systems oder Ausgabegerätes, und beziehen sich direkt auf diese Werte oder Vorgaben.

Zur Erklärung, die Anzeige eines Bildschirms besteht bekanntlich aus einer Vielzahl von Bildpunkten, eben den Pixeln. Die Anzahl dieser Punkte wird durch die verwendete Auflösung des Ausgabegerätes angegeben.

Eine Auflösung von z. B. 1024×768 gibt also an, dass 786.432 (das Ergebnis von 1024×768) unterschiedliche Bildpunkte angezeigt werden. Bildschirme sind allerdings in der Lage verschiedene Auflösungen auszugeben. Wird also die Anzahl der angezeigten Bildpunkte erhöht (z. B. 1930×1440; ergibt 2.779.200 Bildpunkte) oder wieder verringert (z. B. 1280×1024; ergibt 1.310.720 Bildpunkte), ändert der Bildschirm beim Wechsel der Auflösung nur die Größe der Pixel. Bei Pixeln könnte man genau genommen sogar sagen, dass auf die Anzeige bzw. den Inhalt bezogen eine absolute, auf Anzeigegeräte bezogen eine relative Maßeinheit ist. Zugeordnet wird sie aber meist den relativen Maßeinheiten.

Auch zu beachten wäre, dass in im Umgang mit CSS ein numerischer Wert mit einem Punkt und nicht mit einem Komma getrennt wird. Beispiel: richtig 1.25cm, falsch 1,25cm

Hier die Übersicht der verfügbaren Maßeinheiten, in der Auszeichnungssprache CSS:

MaßeinheitZuordnung absolut/relativErklärung
 pt absolut Punkt (1 Punkt = 1/72 Inch)
 pc absolut Pica (12 Punkt [pt] = 1 Pica)
 mm absolut Metrisches Maß Millimeter
 cm absolut Metrisches Maß Zentimeter
 in absolut Inch (1 in = 2,54 cm)
 %relativProzent relativ zur im Element definierten Größe,
zu der des Elternelements oder zu der obersten
Definition im Dokument.
 emrelativRelativ zur elementeigenen Schriftgröße. Hat dieses
die selbe Angabe, dann richtet sich der Wert nach dem
übergeordneten Element.
 exrelativBezieht sich auf die Höhe des Kleinbuchstaben x des
jeweiligen Elements. Außer Standardschriftgröße ist
identisch, dann richtet es sich nach der x-Angabe
im übergeordneten Element.
 pxrelativDie Darstellung steht im direkten Zusammenhang zu
der Pixeldichte des Anzeigegerätes.

Ich hoffe, der Artikel »Absolute und relative Maßeinheiten in CSS« konnte einen kleinen Überblick gewähren oder etwas Licht ins Dunkel bringen. Hier gilt die Regel, am besten einfach ausprobieren. Das veranschaulicht die Ausgabe der Maßeinheiten am deutlichsten, zumindest bei den meist genutzten Einheiten wie beispielsweise px, em oder %.

Über

Hi, ich bin Marc Berndt. Mediengestalter, Farbenversteher und interessiere mich für alles aus dem IT-Bereich. Ich bin gerne im Internet unterwegs und mag die Möglichkeiten, die das Netz bietet. Und ja, ich programmiere, fotografiere & zeichne sehr gerne.

Folge dem Autor

Kommentieren

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*
*