nicht angemeldet
Hallo miteinander!
Ich bin auf ein Problem gestoßen, an welchem ich mir gerade die Zähne ausbeiße.
Folgend der extrem simple Code meiner Testseite:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Testseite</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<h1>
Unterlaenge
</h1>
</div>
</body>
</html>
CSS
* {
/* verfälschende Abstände des Browser-Stylesheets eliminieren */
padding: 0;
margin: 0;
}
body {
font-family: geneva; /* geneva = ausgeprägter Effekt */
}
div {
border: 2px solid #FF0000;
}
h1 {
font-size: 30px;
line-height: 1;
background-color: #FFFF00;
border: 2px solid #0000FF;
}
DAS PROBLEM
Mit obigem Code wollte ich durch eine Zeilenhöhe von 1 die vertikalen Abstände zwischen Textkörper und Elementgrenzen loswerden, um mehr Kontrolle über die Abstände vom Textkern zu benachbarten Elementen zu erhalten.
Wenn ich jedoch den obigen Code in den unten aufgeführten Browsern öffne, liegt die Unterlängenlinie des Elements h1 unterhalb der Objektgrenzen von h1 und sogar div. Sobald ich die Schriftgröße verkleinere, verkleinert sich auch der Überhang, und das allem Anschein nach direkt proportional. Sinngemäß Selbiges passiert bei einer Vergrößerung der Schriftgröße.
Was mir interessant erscheint, ist der Abstand vom Textkörper zur oberen Elementgrenze, welcher gemeinsam mit dem direkt proportional zur Schriftgröße zusammenhängenden Überhang, für mich wie eine einfache Verschiebung der Unterlängenlinie aussieht.
Ergänzend zu erwähnen ist, dass der Effekt je nach verwendeter Schriftart unterschiedlich ausfällt; ist die Unterlängenlinie bei Helvetica in jedem Test im Inneren des Elements h1, so sinkt sie bei Futura in ungeahnte Tiefen.
Auch macht es keinen unterschied, welche Einheit ich benutze; px, em, rem, % - es ist bei allen dasselbe Ergebnis.
DIE FRAGEN
Wieso ist dem so? Kann ich nicht davon ausgehen, dass eine Zeilenhöhe von 1 nur den Textkörper ohne Abstände ergibt?
TESTUMGEBUNG
Mozilla Firefox v3.6.28 / Mac OS X 10.5.8 32-Bit PPC
Mozilla Firefox 28 / Windows 7 32-Bit
Apple Safari v5.0.6 / Mac OS X 10.5.8 32-Bit PPC
Im Anhang finden sich zur Veranschaulichung des Problems ein paar Beispielbilder, welche zur Erleichterung der Ansicht nachträglich alle auf etwa die gleiche Größe skaliert wurden.
Ich danke für jede Antwort!
Mit freundlichen Grüßen,
Floh
MudGuard
Auge