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

Question

I have an element that contains two span tags, each of which contains some text. The container element sets the font size, and the font size on the second span tag is set to a smaller size. When the second range decreases in font size, the space between the line and the next block element increases. This happens both in WebKit and in Gecko.

The container element p has { margin-bottom: 0; padding-bottom: 10px; } { margin-bottom: 0; padding-bottom: 10px; } { margin-bottom: 0; padding-bottom: 10px; } , and his next brother has { margin-top: -5px; } { margin-top: -5px; }

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

Why does the interval under the p tag increase after decreasing the font size of the second span tag?

Answer 1

I assume that you have a (relatively) long line length inherited by this decimal interval (maybe 32px?), And when you reduce the font size to 18px, you get a situation where the base line of the decimal glyph matches odd glyphs, but the line should still occupy the full specified line height. Thus, additional space is added below the baseline.

Add a line height rule, and I'm sure this goes away:

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