Wie berechnet sich die Gesamtbreite bzw. -höhe einer Box ?

Abstände in CSS berechnen Im Bild rechts wird die Gesamtbreite eines Box-Modells in der Masseinheit Pixel berechnet. CSS bietet Schriftgrössen in vier Masseinheiten: Punkt, Pixel, Prozent und EMS. Auch die Breite und Höhe von Layoutblöcken oder Tabellen kann absolut als Pixel oder relativ in Prozentwerten geregelt werden. Da die Auflösung der Monitore vom kleinen Notebook mit 800 x 600 px Auflösung bis zum Grossbildschirm mit 1920 x 1200 px sehr unterschiedlich sein kann, wird ein auf allen Bildschirmen gleichbleibendes Layout immer komplexer. Zwar wird durch Schriftgrössen in Pixeln eine gleichbleibendere Darstellung erreicht, aber bei einer Monitorauflösung von 800 x 600 px wird eine 20 px grosse Schrift anders wirken als auf einem Bildschirm mit 1920 x 1200 px. Sowohl relative Angaben wie EMS und Prozent als auch absolute Angaben wie Pixel und Punkt haben Vorteile und Nachteile. EMS für die Schriftgrösse ist eine elegante Lösung, die dem Benutzer die Anpassung an die eigenen Sehgewohnheiten erlaubt, während sich mit Schriftgrössen in Pixel ein pixelgenaues Layout umsetzen lässt.

Prozent und EMS- Skalierbare Schriftgrössen und flexibles Layout

Tabelle mit punkt, pixel, ems, prozent Die Masseinheit EMS (Abk. em) bezieht sich auf die Schriftgrösse eines Elements. Für ein flexibles Layout, dass sich anpasst, wenn der Benutzer die Schriftgrösse im Browserfenster ändert, ist EMS als Masseinheit für Schriften und Layout-Boxen besser geeignet als Pixel. Prozentangaben (Abk. %) eignen sich besonders gut für die Ausgabe auf dem Monitor, wenn Layoutelemente an verschiedene Bildschirmgrössen angepasst werden sollen.

Pixel und Punkt – gleichbleibendes Layout

Ein Pixel (Abk. px) beschreibt die kleinste Ausgabeeinheit eines Monitors und ist relativ von Ausgabegerät zu Ausgabegerät. Auf den einzelnen Monitor bezogen ist die Angabe von Pixeln ein absolutes Mass. Pixel sind ein geeignetes Mass, um Schriftgrössen und die Abmessungen von Elementen für den Monitor festzulegen. Die typografische Masseinheit Punkt (Abk. pt) ist geeignet für den Druck. Grafiker verwenden meist die Masseinheit Punkt, während Webdesigner eher mit Pixel arbeiten.