Rolf B: vertical-line: warauf bezieht sich text-top ?

Beitrag lesen

problematische Seite

Hallo wilmaed,

hier kommen ein paar Effekte zusammen. Die Vermischung von line-height und vertical-align: text-* ist ungesund bzw. anti-intuitiv. Oder extuitiv :D

Erstens: line-height:80px macht die Zeile höher. Der Text wird mittig darin angeordnet. Ohne vertical-aligns würde dein ATX also vertikal in der Mitte des DIV ausgerichtet sein. Hintergrundfarben und Ränder beachten diese Erhöhung NICHT, d.h. es ist schwierig, die Grenzen der line-height Vergrößerung sichtbar zu machen.

vertical-align: text-top verschiebt sein Element (den span) so, dass seine Oberkante am Text-Top der Zeile im Eltern-Element ausgerichtet ist, in der das Element steht. Die Oberkante des X-span ist ein ganzes Stück über dem X - wo genau, siehst Du nicht. Der Bezug für die Ausrichtung ist die Oberkante der Font-Box um das A herum, also knapp oberhalb des A. Deswegen wandert das X nach unten.

Analog text-bottom: Die Unterkante des X-Span wird an der Unterkante der Font-Box des A ausgerichtet (also ein paar Pixel unter dem A, da könnten ja noch Buchstaben mit Unterlänge sein). Deswegen wandert das X nach oben.

vertical-align ist ein schönes Beispiel für die alte Weisheit, dass Computer nie tun, was sie sollen. Immer nur das, was wir ihnen sagen. Und oft geht es uns dabei wie dem deutschen Gast im britischen Restaurant: "Misterr waiterr, wenn I become my steak?!" - "Oh, I hope never, Sir!".

Rolf

--
sumpsi - posui - clusi