Menu
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/
399
To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size.
To change the default block type of an element, we use the display property. To make the element block type, we use display: block; and to make it inline-block type use display: inline-block; . You can set the width and height of the span tag either by using display: inline-block; or display: block; .
Definition and Usage The font-size-adjust property gives you better control of the font size when the first selected font is not available. When a font is not available, the browser uses the second specified font.
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.
55
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
