W3C home > Mailing lists > Public > www-style@w3.org > January 2008

Re: Line layout in browsers

From: David Hyatt <hyatt@apple.com>
Date: Mon, 21 Jan 2008 14:38:48 -0600
To: "Eric A. Meyer" <eric@meyerweb.com>
Cc: www-style@w3.org
Message-id: <42D59C3A-6676-43B2-B0A5-08092CEC5747@apple.com>


On Jan 21, 2008, at 2:25 PM, Eric A. Meyer wrote:

>
> At 5:18 PM -0800 1/17/08, Alex Mogilevsky wrote:
>
>>>     * Conversely, the borders overlap in Explorer and Firefox at  
>>> '1',
>>> but get close to touching at '1.2'.  Which again seems backwards.
>>
>> '1' is normally less than default line height defined by font. So  
>> span borders (which are drawn around actual character boxes) will  
>> overlap. What is unexpected there?
>
>   Wait, what?  The last I checked, the height of a line is based on  
> the computed 'font-size' of an element.  So if the element has a  
> computed 'font-size' of 100px and the 'line-height' is '1', then the  
> 'line-height' is 100px.  If the spans are based on the actual  
> character boxes, which are 100px high, then they ought to exactly  
> line up with the edge of the line box in this case.  And, thus, not  
> overlap.  At least, that's my understanding of the CSS line layout  
> model.

Borders increase the span height (as does padding).  If you put 1px  
top and bottom borders on a span in an attempt to "see where it is",  
then you just made a span box that is 2px taller.  Therefore at a line- 
height of 1 (100px), there will be a slight overlap since the span  
boxes are a bit taller than the height of the line (102px).

dave
(hyatt@apple.com)
Received on Monday, 21 January 2008 20:39:10 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:58 GMT