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的背景颜色将显示在整个区域中。知道怎么做吗？

Answer 1

发生这种情况的原因是默认情况下某些元素具有浏览器样式，这就是为什么你应该总是使用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>

Answer 2

喜欢这个

<强> DEMO

<强> CSS

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

}

<强> DEMO1

Answer 3

在font-size上设置line-height和h3，如下所示：

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

Answer 4

重置css？这会将all设置为默认值。

Answer 5

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

Answer 6

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

默认情况下，h3具有与之关联的边距。所以你必须在h3标签上添加一个余量：0。

<强> DEMO

Answer 7

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

Answer 8

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