I've come across some really strange behavior when trying to mix multiple font-sizes within a single block element. I've built an example page here:
http://kage23.com/line-height.html Basically, it seems like I'm getting an extra pixel of height and I can't track down how or why. In my example, the paragraph inside of the first block is 24px tall, as one would expect from a line of text with line-height of 24px and no margins or padding. However, the paragraph inside of the second block is 25px tall, even though it has a line-height of 24px. The span has a font-size of 20px, so it should still fit within the line-height. (In fact, as I was playing with it, I was still seeing the same issue, in some cases even more pronounced, when I made the span a smaller font-size than the rest of the paragraph.) This only seems to happen when I mess with varying font-sizes within the same BLOCK-LEVEL element. If, for example, I assign { display: block; } to .block p span, then the span becomes 24px tall, and the p becomes 48px tall, as I would expect. So when my span is inline, why does changing the font-size on the span affect the line-height of the p??? I've been banging my head against this for a while now. I would greatly appreciate any thoughts or suggestions! ~Kyle -- Kyle G Sessions Berkeley Electronic Press [email protected] 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.com ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
