Frage zu relativen Angaben (em)
Moin !
mein Problem, ich habe identische relative Breitenangaben für
2 Elemente, aber sie werden verschieden breit dargestellt die Breite wird
dabei offenbar in Abhängigkeit der font-size Angabe jedes mal neu
berechnet
kleines Code-Schnippsel
* {
padding: 0;
margin: 0;
}
body {
text-align: center;
background-color: #ececec;
font-family: Arial, arial, sans-serif;
font-size: 100.01%;
}
div.test {
width: 20em;
height: 2em;
background-color: red;
}
h1 {
font-size: 1.6em;
font-weight: normal;
letter-spacing: 0.9em;
width: 20em;
text-align: left;
background-color: #ddddff;
}
im HTML code dann
<h1>Test</h1>
<div class="test"></div>
(selbst komplett OHNE Inhalt, sind die Breiten verschieden, hat also
nichts mit overflow zu tun)
und zumindest bei mir (IE 6.0.2) sind h1 und div verschieden breit
wenn ich nun die Schriftgröße des H1 auf 1em runtersetze, sind beide
Elemente gleichbreit, setze ich sie auf 0.8em wird das H1 Element
tatsächlich kleiner als das DIV (das offenbar 1em als Initialwert besitzt?)
meine Fragen
Ist das vom Browser so korrekt dargestellt ?
Warum ist das so ? (CSS Vererbung ..eigentlich hier ja nicht?)
Wie kann man das verhindern ohne zusätzliche DIVs/Spans zu benutzen ?
MfG
Micha
|