|
||||
Bildhöhe in "em" entspricht nicht der Erwartung
Moin.
Ich möchte eine Bildhöhe relativ zur Schriftgröße angeben und wählte daher die Einheit em. Es wird eine deutlich größere Höhe im Browser angezeigt als erwartet. Beispiel: Bei der Länge eines Geviertstriches von 13,5mm wird eine Höhe von 79mm erzeugt. Rechnerisch korrekt wäre jedoch 67,5mm. Worin liegt bitte mein Fehler? Testcase: Unit "em" Code:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testcase: Unit "em"</title> <style type="text/css" media="screen"> img { height: 5em; width: 5em; } body { font-size: 1em; font-family: "Verdana", sans-serif; } </style> </head> <body> <img src="/+bilder/html/testbild-blau.png" alt=""/> <p>Morem ipsum</p> <p>Geviertstrich —</p> </body> </html>
__________________
|
Sponsored Links |
|
|||
Hallo
Zitat:
Zitat:
em ist schlicht eine Einheit mit bestimmten Eigenschaften. Mehr nicht. Sie kann nichts relativ zu etwas anderem setzen. Schon gar nicht andere Behälter relativ zu Schriftgrößen. Diese Behauptung wabbert zwar dauerhaft durchs Internet, ist aber nicht besser als eine Verschwörungstheorie. Also nichts dahinter, aber auch nicht totzukriegen. Gruss MrMurphy |
Sponsored Links |
|
||||
Dein Testcase ist richtig, die Größe stimmt auch. Ich behaupte mal der Geviertstricht ist kein Geviert breit. Wenn du deinen Testcase reduzierst, das Bild 1em breit machst, den Geviertstrich direkt unter deinem Bild platzierst und mit einem Inline-Element umgibst, dann siehst du, dass die Box des Inline-Elements exakt der Breite des Bildes entspricht. Der Geviertstrich hat noch Fleisch vor und hinter sich, daher vermutlich die Abweichung von deiner Erwartung.
Edit: Hier sieht man schön das Fleisch neben dem Geviertstrich: https://codepen.io/anon/pen/JOBjEX /Edit Doch genau das kann und tut em. Die Größe bezieht sich dabei auf die Schriftgröße des Elternelements und entspricht einem Geviert dort. Geändert von inta (25.11.2017 um 12:02 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|