Inline und Block-Elemente in CSS

[Captain]

Hallo,

mir ist da ein seltsames Verhalten aufgefallen:
Wenn ich in einem sehr kleinem DIV-Container (z.B. 40x16 Pixel), ein weiteres Element einfüge, unterscheidet sich die Position dieses neuen Elements abhängig davon ob es ein Inline- oder Block-Element ist, obwohl sich nichts anderes in diesem Container befindet. Beispiel:
<div><span>Text</span></div>
<div><div>Text</div></div>
unterscheiden sich deutlich in der Höhenanordnung. Ersteres sitzt deutlich tiefer. Natürlich fällt der Unterschied erst auf, wenn man den Text entsprechend klein (ca. 10px) formatiert.

Woran liegt das? Kann mir das jemand sagen?

Captain

[Thomas J.S.]

Hallo,

mir ist da ein seltsames Verhalten aufgefallen:
Wenn ich in einem sehr kleinem DIV-Container (z.B. 40x16 Pixel), ein weiteres Element einfüge, unterscheidet sich die Position dieses neuen Elements abhängig davon ob es ein Inline- oder Block-Element ist, obwohl sich nichts anderes in diesem Container befindet. Beispiel:
<div><span>Text</span></div>
<div><div>Text</div></div>
unterscheiden sich deutlich in der Höhenanordnung. Ersteres sitzt deutlich tiefer. Natürlich fällt der Unterschied erst auf, wenn man den Text entsprechend klein (ca. 10px) formatiert.

Einen Unterschied kann ich nur beim IE erkennen _wenn_
es so notiert wird (also Zeilenumbruch zwishen <div> und <span>
 <div style="width:40px;heigth:16px;border:solid 1px blue;">
         <span style="font-size:10px;">Text</span>
 </div>

Ohne Zeilenumbruch
<div style="width:40px;heigth:16px;border:solid 1px blue;"><span style="font-size:10px;">Text</span></div>

gibt es diesen Unterschied nicht.
Der Grund: der IE interpretiert den Zeilenumbruch als Text, da hier aber die Schriftgröße nur für <span> definiert ist, gilt für das <div> selbst die im Browser voreingestellte (oder durch andere CSS-Formatierungen gültige) Schriftgröße.

Grüße
Thomas