Bei nummerischen Angaben zu CSS-Eigenschaften, also etwa bei Schriftgrößen, Absatzabständen oder Rändern, stehen Ihnen die weit verbreiteten Maßeinheiten zur Verfügung. Dabei sind absolute Angaben (z.B. Millimeter) und relative Angaben (z.B. Prozentwerte) möglich. Nachfolgende Tabelle listet die verfügbaren Maßeinheiten auf.
| Abkürzung | Angabetyp | Bedeutung | Beispiel |
|---|---|---|---|
| % | relativ | Steht für Prozent. Je nach CSS-Eigenschaft relativ zur elementeigenen Größe, oder zu der des Elternelements, oder zu einem allgemeineren Kontext. Bei nebenstehendem Beispiel ist die Angabe zur Zeilenhöhe (line-height) relativ zur Schriftgröße (font-size) zu interpretieren. | line-height: 120%; |
| cm | absolut | Steht für Zentimeter. Allgemeines Längenmaß. 100. Teil des Urmeters. | top: 2.54cm; |
| em | relativ | Steht für bezogen auf die Schriftgröße des Elements. Ausnahme: wenn die font-size-Eigenschaft (also die Schriftgröße selbst) mit dieser Maßangabe versehen wird, steht diese für bezogen auf die Schriftgröße des Elternelements. | font-size: 1.2em; |
| ex | relativ | Steht für bezogen auf die Höhe des Kleinbuchstaben x in diesem Element. Ausnahme: wenn die font-size-Eigenschaft (also die Schriftgröße selbst) mit dieser Maßangabe versehen wird, steht diese für bezogen auf die Höhe des Kleinbuchstaben x im Elternelement. | font-size: 1.3ex; |
| in | absolut | Steht für Inch. Allgemeines Längenmaß im angelsächsischen Raum. 1 Inch entspricht 2.54 Zentimetern. | border-width: 0.1in; |
| mm | absolut | Steht für Millimeter. Allgemeines Längenmaß. 1000. Teil des Urmeters. | margin-bottom: 10mm; |
| pc | absolut | Steht für Pica. Typografische Maßeinheit. 1 Pica entspricht 12 Punkt. | line-height: 1.2pc; |
| pt | absolut | Steht für Punkt. Typografische Maßeinheit. 1 Punkt entspricht 1/72 Inches. | font-size: 12pt; |
| px | absolut relativ | Steht für Pixel. Abhängig von der Pixeldichte des Ausgabegeräts, relativ also von Ausgabegerät zu Ausgabegerät, absolut dagegen auf ein und das selbe Ausgabegerät bezogen. | border-width: 3px; |
| 0 | absolut relativ | Gemeint ist hier der Wert 0. In diesem Fall ist keine Maßangabe erforderlich, da 0 Pixel das Gleiche sind wie 0 Zentimeter oder 0 Prozent. | margin-left: 0; |
Verwenden Sie bei Bruchzahlen stets den Punkt als Dezimalzeichen, nicht das deutsche Komma, also etwa 0.2cm und nicht 0,2cm. Auch Minuswerte sind bei vielen nummerischen Wertzuweisungen möglich, markiert wie üblich durch das Minuszeichen.
Sie können also sehr exakte Angaben notieren, doch Web-Seiten werden in der Regel auf Bildschirmen ausgegeben, und Bildschirme bestehen aus Pixeln, wobei die Pixeldichte der einzelnen Bildschirme sehr unterschiedlich sein kann. Der Computer muss Ihre Angaben für die Ausgabe am Bildschirm letztlich in Pixel umrechnen. Dabei kann es zu enttäuschenden Ergebnissen kommen. So erscheinen Schriftgrößen, die an einem Bildschirm gut lesbar sind, in einer anderen Umgebung eventuell als zu klein. Auch die unterschiedlichen Basiseinstellungen der Betriebssysteme tragen zur Verwirrung bei. So wird unter Windows-Systemen eine Berechnungsgrundlage von 96dpi (Dots per Inch) für die Darstellung von Schriftarten verwendet (bei der Einstellung „große Schriftarten“ gar 120dpi), unter Systemen wie Linux und Macintosh sind es dagegen 72dpi. Deshalb erscheinen Schriftgrößen, die unter Windows sauber aussehen, unter den anderen genannten Systemen oft mickrig, während Schriftgrößen, die dort angenehm aussehen, unter Windows wiederum klobig wirken. Aber auch direkte Angaben in Pixeln lösen das Problem nicht unbedingt. Ein Pixel auf einem 13-Zoll-Notebook-Bildschirm wirkt ganz anders als ein Pixel auf einem 19-Zoll-Desktop-Bildschirm mit der gleichen Bildschirmauflösung.
Angaben wie em oder Prozentwerte umgehen zwar das Problem der unterschiedlichen Bildschirmdarstellungen — doch erstens kann man bei einer Angabe wie 1.2em kaum von „Formatierung“ reden, und zweitens bereiten solche Angaben auch andere Probleme. So kann es beispielsweise durch das Prinzip der natürlichen Vererbung passieren, dass Schriftarten bei mehrfach verschachtelten Elementen (etwa bei Listen oder Tabellen) immer kleiner oder größer werden. Immerhin bietet CSS2 Möglichkeiten an, Formate für verschachtelte Elemente zu definieren, so dass sich diese Probleme in den Griff bekommen lassen.
Um die „richtigen“ und „falschen“ Maßangaben hat es in vergangenen Jahren einen regelrechten Glaubenskrieg gegeben. Mittlerweile sind jedoch glücklicherweise so viele Faktoren hinzugekommen, auch auf Benutzerseite (z.B. die Möglichkeit des Browser-Zooms), dass Diskussionen dieser Art zunehmend an Bedeutung verlieren.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.