Spannweite der viewports

[Auge]

Hallo

main { padding: 0.5rem }

warum wird einmal em und ein anderes Mal rem angegeben?

Beide Einheiten beziehen sich auf die Schriftgröße. Allerdings hängt ein padding oder margin, angegeben mit em, an der Schriftgröße des betroffenen Elements (margin: 1em an einem Absatz resultiert in einem anderen Abstand als margin: 1em bei einer Überschrift mit größerer Schriftgröße), wohingegen ein margin: 1rem in jedem Fall gleich groß ist, da sich rem auf die im Browser voreingestellte Basisschriftgröße bezieht.

Bei einer Basisschriftgröße von 16px entspricht 1rem immer 16px und auch margin: 1rem sind 16px. Hingegen entspricht margin: 1em bei einer Schriftgröße von 1.5em, was in unserem Fall 24px entspricht, ebenfalls 24px.

Tschö, Auge