kannst du das noch für em vs. rem tun
Ich versuche es mal:
-
rem - Höhe eines Zeichens im <html>, kann vom Browser-eigenen CSS gesetzt werden und wird von diesem an den body vererbt und Kindelemente ohne eigene absolute Angabe vererbt, durch den Benutzer oder aber im css für <html> gesetzt werden.
-
em - Höhe eines Zeichens im aktuellen Element. Wird vom umgebenden <html>-Element oder dem Browser-CSS (oder aus benutzereinstellungen) geerbt und kann mit font-size für das Element überschrieben werden.
hat man eine Struktur wie
<html>
<body style="font-size:2em">
<h1 style="font-size:2em; border: 1em red solid">Hallo</h1>
</body>
</html>
Die Rahmendicke ergibt sich wie folgt:
<html> : relative Zeichenhöhe 1 * Zeichenhöhe der im browsereigenen CSS eingestellten Schrift.
<body>: doppelte Zeichenhöhe der von <html> geerbten Schriftgröße
<h1>: doppelte Zeichenhöhe der von <body> geerbten Schriftgröße, also 4-fache Zeichenhöhe der von <html> geerbten Schriftgröße. Also 1em * 2 * 2 = 4rem.
Rahmendicke: wie vor (1em, also 4rem)
Bild:
hat man eine Struktur wie
<html font-size:1em>
<body style="font-size:2em">
<h1 style="font-size:2em; border: 1rem red solid">Hallo</h1>
</body>
</html>
hat das Ergebnis also eine Rahmenbreite die der ursprünglichen Zeichenhöhe
<html >: relative Zeichenhöhe 1 * Zeichenhöhe der im browsereigenen CSS eingestellten Schrift.
<body>: doppelte Zeichenhöhe der von <html> geerbten Schriftgröße
<h1>: doppelte Zeichenhöhe der von <body> geerbten Schriftgröße, also 4-fache Zeichenhöhe der von <html> geerbten Schriftgröße. Also 1em * 2 * 2 = 4em.
Rahmendicke: wie in <html>, also Zeichenhöhe der im browsereigenen CSS eingestellten Schrift.