为什么我的 h2 和 div 的字体大小相同
我正在尝试转换一个元素。字体大小转换工作正常,但边距转换效果不佳。
这是我的尝试:
<!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>
比较:
<!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>
如您所见,在浏览器中查看时,H2 和 .box 文本具有相同的字体大小。
这是不正确的,应该是 24px。我犯了什么错误?
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?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
div
元素的margin
属性在所有浏览器中都是默认预设的,而font-size
属性则不然。要覆盖它,您需要更具体,使用以下方法:The
margin
property for adiv
element is preset by default in all browsers, whereas thefont-size
property is not. To override it, you need to be more specific, by using this:您可以设置其他元素将继承的正文的字体大小,但 h2 是由浏览器在用户代理 css 内部预设的,具体来说,如“特异性”中所示,并且优先于您为正文设置的内容。
例如,如果您使用 Firebug,您将看到浏览器已将 h2 设置为浏览器中的某个值。如果您想更改它,则需要指定
h2{font-size: 24px}
,就像在另一个 div 示例中所做的那样。 Div 没有由浏览器设置的字体大小。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.