Why does my h2 and div have the same font-size
I'm attempting to convert an element. The font-size conversion works fine, but the margin conversion isn't doing so great.
Here is my attempt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.box{
font-size:30px;
margin:23px 0;
font-weight:bold;
}
</style>
</head>
<body>
</head>
<body>
<div class="box">Some text here</div>
</body>
</html>
Compared to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body{
font-size:20px;
}
</style>
</head>
<body>
</head>
<body>
<h2>Some text here</h2>
</body>
</html>
As开发者_运维问答 you can see, the H2 and the .box text have the same font-size when viewed in a browser.
This is incorrect, and should be 24px. What mistake have I made?
You set the font size for the body which other elements will inherit but h2 is preset by the browser internally by the user agent css, specifically, as in 'specificity' and takes precedence over what you set for the body.
If you use Firebug, for example, you will see the browser has already set h2 to some value in your browser. If you want to change that, you need to specify h2{font-size: 24px} as you did in your other example with the div. Divs do not have a font-size set on them by the browser.
The margin property for a div element is preset by default in all browsers, whereas the font-size property is not. To override it, you need to be more specific, by using this:
div.box { font-size:30px; margin:23px 0; font-weight:bold; }
加载中,请稍侯......
精彩评论