CSS: Why does reducing the font size of an adjacent inline element increase the overall leading?

Question

I have an element that contains two span tags that each contain some text. The container element sets a font size, then the font size on the second span tag is set to a lower size. When the second span is reduced in font size, the space between the line and the next block element is increased. This occurs in both WebKit and Gecko.

The p container element has { margin-bottom: 0; padding-bottom: 10px; } and its following sibling has { margin-top: -5px; }

The following image illustrates the situation and contains a snapshot of the relevant part of the document structure in FireBug.

Why is the spacing beneath the p tag increasing after reducing the font size of the second span tag?

Answer 1

My guess is that you have a (relatively) large line-height being inherited by that decimal span (perhaps 32px?), and when you reduce the font size down to 18px, you get a situation where the baseline of the decimal glyphs match up with the nondecimal glyphs, but the line must still take up the full specified line-height. Thus, extra space is added below the baseline.

Add a line-height rule and I bet this goes away:

.box .value > .decimal { line-height: 18px; }