Re: Inline borders

On Fri, 18 Apr 2003, Boris Zbarsky wrote:

> >>Why doesn't adding a thick border to an inline element affect the height
> >>of the line it is on? This causes the border to overlap the text.
- -
> If I understand correctly, the question was "Why does the CSS2 box model
> stipulate this behavior?"

The question referred to the CSS1 testing suite, but there doesn't be any
substantial change here between the versions.

The principle looks OK to me, since there are situations where such
rendering is desirable. For example, at the start of a paragraph, such an
inline box with borders usually does not require increase line-height, but
general rules on adjusting-height would lead apply there as well.

Besides, you can specify the desired line-height either for the inline
boxes, or for the enclosing element. In the former case, uneven line
spacing will result, of course. Apparently the border width should then be
specified in a unit relative to the font size, not in pixels (except if
the font size is, for some odd reason, in pixels). If we have e.g.

.one {border: 0.3em teal outset;}
.two {border: 0.3em olive inset;}


.one, .two { line-height: 1.6em; }

would implement the first approach. And if the text is in a paragraph,

p { line-height: 1.6em; }

would be suitable.

So with the current specs you can get a) the overlapping effect in the
test _or_ b) increased line-height only where needed _or_ c) uniformly
increased line-height for an enclosing block. As you like it. I guess that
if borders were defined to affect line-height automatically, it would
actually complicate things.

Jukka "Yucca" Korpela,

Received on Friday, 18 April 2003 01:32:18 UTC