为什么我的 h2 和 div 的字体大小相同

发布于 2024-12-04 02:50:32 字数 1018 浏览 0 评论 0原文

我正在尝试转换一个元素。字体大小转换工作正常,但边距转换效果不佳。

这是我的尝试:

<!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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

忆离笙 2024-12-11 02:50:33

div 元素的 margin 属性在所有浏览器中都是默认预设的,而 font-size 属性则不然。要覆盖它,您需要更具体,使用以下方法:

div.box { font-size:30px; margin:23px 0; font-weight:bold; }

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; }
时光礼记 2024-12-11 02:50:32

您可以设置其他元素将继承的正文的字体大小,但 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文