inline-Elemente sprengen Textausrichtung an vertikalem Raster

[DeWitt]

Hallo SELFHTML-Gemeinde,

Ich beschäftigte mich gerade mit der typographischen Gestaltung mit CSS, genauer gesagt der Textausrichtung an einem vertikalen Raster. Dabei ist mir aufgefallen, dass semantische Inline-Elemente (code, samp, ...) in Opera und Firefox (nicht in IE5.5 - 7) das Raster sprengen, wenn man für sie keine Schrift- oder Zeilengröße angibt, die kleiner ist als die des Elternelements.

Zur Verdeutlichung habe ich eine kleine Beispiel-Seite erstellt. Auf dieser Seite werden die Browser-Voreinstellungen gelöscht, dann eine Schriftgröße von 14px und ein Zeilenabstand von 1.5em eingestellt. Die besagten Elemente bekommen lediglich eine Schriftart zugewiesen.

Die einfachste Lösung ist wie gesagt, einfach Zeilenabstand oder Schriftgröße soweit zu reduzieren, bis die Elemente den Rahmen nicht mehr sprengen. Aber das ist ja eigentlich nur ein Work-Around, mich würde viel mehr interessieren woran das wirlich liegt bzw. ob es ein CSS-Attribut gibt, dass das Verhalten "korrigiert". Ich hätte spontan an padding oder margin gedacht, aber die sind ja schon (mittels reset.css) auf "0" gesetzt.

Hat jemand eine Idee woran das liegt, bzw. kann mir das Prinzip erklären? Und wer stellt das jetzt eigentlich richtig (= den HTML/CSS-Spezifikationen entsprechend) dar? FF und Opera oder ausnahmsweise mal der IE (das wär ja was ;))?

Ciao,
David //aka DeWitt