zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bildhöhe in "em" entspricht nicht der Erwartung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.11.2017, 09:11
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard 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>
__________________

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.11.2017, 12:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Worin liegt bitte mein Fehler?
In der Vermutung

Zitat:
Ich möchte eine Bildhöhe relativ zur Schriftgröße angeben und wählte daher die Einheit em.
Das ist falsch.

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.11.2017, 12:39
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

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


Zitat:
Zitat von MrMurphy Beitrag anzeigen
Sie kann nichts relativ zu etwas anderem setzen.
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 13:02 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 26.11.2017, 08:20
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

@inta
Vielen Dank für den Hinweis. Deine Erklärung ist plausibel
__________________

Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 16:46 Uhr.