Probleme mit em

[marctrix]

Hej bleumi85,

Dein CSS erzeugt einen 3em hohen Kasten, davon gehen oben und unten je 1em ab für den Innenabstand. Bleibt 1em übrig. Du gibst zwar der Schrift eine Größe von 1em - was auf den ersten Blick passen sollte - aber die Größe der Schrift ist für den Platz, den die Schrift benötigt, vollkommen unerheblich. Entscheidend ist hierfür die Höhe der Zeile. Du kannst riesigen Schriften eine Zeilenhöhe von nur einem Pixel zuweisen - dann bekommen die großen Buchstaben freilich zu wenig Platz und alles wird unleserlich - sie beanspruchen aber tatsächlich nur einen Pixel Höhe für sich und würden in Deine Box passen.

Auch eine Zeilenhöhe von 1em ist für 1em große Schriften noch ungegeignet, weil je nach Schriftart sich die hohen Buchstaben der unteren Zeile mit den Unterlängen der oberen Zeile treffen oder gar überlappen. Im allgemeinen gibt man eine Zeilenhöhe mit, die ungefähr der eineinahlbfachen Schriftgröße entspricht. Man gibt die dann tatsächlich so an:

line-height: 1.5;

Das heißt ohne Maßeinheit - die würde zwar funktionieren, aber so macht man sich bewusst, dass es sich tatsächlich nur um einen Multiplikator und nicht um eine feste Größe handelt. Außerdem kann man sich nicht vertippen und es ist auch schneller geschrieben.

Dein Browser bringt ja sinnvolle Vorgaben in seinem eigenen CSS mit (sonst wären die Überschriften ja nicht groß und fett oder Links standardmäßig blau und unterstrichen). Im Browser-CSS steht auch ein Faktor für die Zeilenhöhe (kenne die aus dem Kopf nicht, müsste 1.4 oder so sein, ist auch nicht identisch in allen Browsern).

Für Dein problem bedeutet das: du hast in Deiner Box 1em padding oben, 1em padding unten und eine Zeile mit einer Höhe von ungefähr 1.4em. ;-)

Marc