html - H3 比封闭 div 占用更多空间

Question

我有一个这样的网页。

<html>
<head></head>
<body>
    <div style="background:blue">
        <h3 style="background:green">Hello world.</h3>
    </div>
</body>
</html>

当我分析 chrome 中的输出时，似乎 h3 标签比 div 标签占用更多空间。我希望 div 标签完全包含 h3 标签，并且 div 的背景颜色要显示在整个区域中。知道怎么做吗？

score 3 · Accepted Answer

发生这种情况的原因是某些元素默认具有浏览器样式，这就是为什么您应该始终使用css reset：

如果浮动 div 它将环绕元素，并将 h3 的边距设置为 0。

<div style="background:blue;float:left;">
   <h3 style="background:green;margin:0;">Hello world.</h3>
</div>

为了让 div 占据整个屏幕的大小，请移除浮动。

<div style="background:blue;">
 <h3 style="background:green;margin:0;">Hello world.</h3>
</div>

score 3 · Accepted Answer

像这样

CSS

.div1{
    background-color:blue;
    float:left;
}
h3{
    margin:0;
    padding:0;
    background:green;

}

score 2 · Accepted Answer

2

我看到的最简单的解决方案是添加overflow: hidden;到封闭的 div 中。

于 2013-08-30T12:57:40.943 回答

score 2 · Accepted Answer

2

将 h3 的边距设置为 0。这将解决问题。

于 2013-09-12T09:36:02.273 回答

score 2 · Accepted Answer

2

设置一个font-size和类似line-height的h3：

h3 { 
  font-size: 16px;
  line-height: 1em; }

于 2013-08-30T12:55:26.850 回答

score 2 · Accepted Answer

2

采取了CSS重置？这将所有设置为默认值。

于 2013-08-30T12:56:23.587 回答

score 2 · Accepted Answer

<h3 style="background:green;margin:0;">Hello world.</h3>

默认情况下 h3 有一个与之关联的边距。所以你必须在 h3 标签中添加一个 margin:0 。

score 0 · Accepted Answer

0

我通过增加 h3 的行高解决了这个问题。

于 2019-08-06T08:33:50.337 回答

8 回答 8