Home/ Questions/Q 7704091
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T23:36:26+00:00

I am displaying two DIV panels with the code below. The only difference between

  • 0

I am displaying two DIV panels with the code below. The only difference between the two panels is that the SPAN element within the first DIV element has a font-size: 14px style applied to it while that of the second DIV element doesn’t have this style. On Firefox as well as Chrome the first panel appears to have a greater height than the second one. Here is a demo URL: http://jsfiddle.net/UWX2u/

A copy of the code follows:

<!DOCTYPE html>
<html>
<head>
<title>Margin border</title>
<style type="text/css">
body {
    line-height: 38px;
    font-size: 32px;
}

#panel1 {
    background: #00a000;
    float: left;
}

#panel2 {
    background: orange;
    float: left;
}

#panel1 p span {
    font-size: 14px;
}
</style>
</head>
<body>

    <div id="panel1">
        <p>Foo <span>Bar</span></p>
    </div>

    <div id="panel2">
        <p>Foo <span>Bar</span></p>
    </div>

</body>
</html>

With Firebug I could see that the computed height of the P element in the first DIV is 44.1833px while that of the P element in the second DIV is 38px. Why does this difference occur?

If I remove the line-height: 38px property from the CSS, both DIV elements have the same height. Here is a page that demonstrates this: http://jsfiddle.net/FJUDn/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As to “Why” it Happens

    According to W3C (bold emphasis added),

    ‘line-height’ specifies the minimal height of line boxes within the
    element. The minimum height consists of a minimum height above the
    baseline and a minimum depth below it … The height and depth of the font above
    and below the baseline are assumed to be metrics that are contained in the font.

    So what this tells me is that

    1) the line-height can go taller if need be (it is just a minimum), and

    2) your shrinking of the font would seem to be shifting how the font applies the minimum above and below the baseline of the span for the line-height: 38px. Apparently the smaller font size redistributes more spacing below the baseline of the smaller font, pushing the p tag taller. This seems confirmed in that if you add to the span a vertical-align: top as I did here, then the baseline shifts up for the smaller font, and no size change occurs in the p tag.

    • 0