On Sunday 2007-04-08 21:33 -0400, Chris Hoffman wrote: > font-size: 12px; > line-height: 14px;
> As I understand it, the text box (inline box?) -- to which the > background-color applies -- should be 12 pixels high. The difference > between that and the line-height (14 - 12 = 2 pixels) should then be > divided in half, and half added to the top of the inline box and half > to the bottom. Then the lines should be stacked in the paragraph. The spec defines inline elements as having two different heights [1]: 1. one is the height of the font, surrounded by border and padding 2. the other is the line-height One of these heights is always vertically centered within the other. Backgrounds are drawn based on (1), but (2) is used when calculating the This is confusing primarily because a 12px font isn't actually 12px high. The font designer can make it any height they want, and they generally don't make it exactly the nominal height. Older versions of CSS said that the 'font-size' property referred to the actual height and not what the font designer said [2], but browsers didn't implement this, so it's been removed. (Too many pages depended on the previously-incorrect behavior for anybody to ever implement the correct one.) (I wish there were a way to specify line-height in a way that is a multiple of the extents of the font, not its nominal size. I once tried to push for <number> values to be this. That said, because of the inheritance rules, you're better off using <number> values anyway. That is, you're better off using 'line-height: 1.2' than 'line-height: 1.2em' or 'line-height: 14px' because of the way it inherits.) -David [1] http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced [2] http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font-size says "This property describes the size of the font when set solid." -- L. David Baron <URL: http://dbaron.org/ > Technical Lead, Layout & CSS, Mozilla Corporation
pgpbCBxO5wr1u.pgp
Description: PGP signature
______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
