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).

Received on Monday, 21 January 2008 20:39:10 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:33 UTC