Home/ Questions/Q 966953
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T02:14:25+00:00

I have an element that contains two span tags that each contain some text.

  • 0

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.

alt text

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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; }
    • 0