Menu
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?
393
The font-size CSS property sets the size of the font.
When you set font-size on an element, the element certainly does not inherit font size. This is about the effect of the relative nature of the em unit.
An em is a unit of measurement, relative to the size of the font; therefore, in a typeface set at a font-size of 16px, one em is 16px. The em square is the “box” that each glyph is sized relative to. So, at 12 points, the em square is 12 points wide.
The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion.
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
