Re: vertical-align and line-height

On Thursday 2009-02-26 17:30 +0100, Michael Jansson wrote:
> I don't understand how the height of the single line is being computed  
> for the middle block element in Firefox and Opera. I would expect it to  
> be 100px, since none of the inline elements are taller than that.  
> However, I get a taller block in Firefox and Opera. I can also see that  
> there is actually two line boxes if I select the text in the browser. I  
> only expect one.

Neither is taller than 100px, but they're not at the same position.
The half-leading goes evenly on each side of the font, so the line
is supposed to end up taller than 100px.

> Second mystery is that the text is not being text-bottom aligned in  
> Firefox and Opera for the middle case. Intuitively, I wouldn't expect  
> setting the line-height to affect the vertical alignment. I would expect  
> case 2 and 3 to give the same result.

This is because 'text-bottom' aligns the bottom of the box (which
includes the half-leading, which is different sizes for different
pieces of text) to the bottom of the parent's text.  (In this case,
there isn't any text in the parent, but it still has metrics.)

-David

-- 
L. David Baron                                 http://dbaron.org/
Mozilla Corporation                       http://www.mozilla.com/

Received on Thursday, 26 February 2009 18:25:54 UTC