Re: Line layout in browsers

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)