Re: Line layout in browsers

On Jan 21, 2008, at 2:38 PM, David Hyatt wrote:

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

What Alex is saying is that the default value of "normal" for line- 
height results in the browser using the line height that is built into  
the font itself. That value, if viewed as a multiple of the font size,  
is almost always > 1 (and usually closer to 1.2).  Picking '1' as your  
explicit line-height is typically going to result in lines that are  
pretty close together, since you've effectively eliminated the gaps  
between lines (making it possible for a character with  a large  
descent to touch a character on the next line with a large ascent).   
Therefore building additional height into any spans on the line  
through the use of border/padding is going to pretty much guarantee an  
overlap of those boxes.

dave
(hyatt@apple.com)

Received on Monday, 21 January 2008 20:50:59 UTC