Html H3比封闭的div占用更多的空间_Html_Css

Html H3比封闭的div占用更多的空间

html css

Html H3比封闭的div占用更多的空间,html,css,Html,Css,我有一个这样的网页 <html> <head></head> <body> <div style="background:blue"> <h3 style="background:green">Hello world.</h3> </div> </body> </html> 你好，世界。当我分析chrome中的输出时，h3标记似乎比div

我有一个这样的网页

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


你好，世界。

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

在

h3

上设置

字体大小和行高
，如下所示：
h3 { 
  font-size: 16px;
  line-height: 1em; }

发生这种情况的原因是，某些元素在默认情况下具有浏览器样式，这就是为什么您应该始终使用：
如果浮动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>


你好，世界。
像这样

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

}
是否重新设置了css？这将所有设置为默认值
我看到的最简单的解决方案，添加溢出：隐藏到封闭的分区。
你好，世界。
<h3 style="background:green;margin:0;">Hello world.</h3>


默认情况下，h3有一个与其相关联的保证金。因此，您必须在h3标记中添加边距：0
将h3的边距设置为0。这将解决问题。
我通过增加h3的线高度解决了这个问题。
根本不需要浮动；将边距设置为0就足够了。@LeBen我把整个屏幕的要求隔开了：D相应地编辑了答案。我想我们现在也是朋友了。@Thomas为什么要在问题解决两周后将已接受的答案改成较低质量的答案？我把它改回了，Happy now？div{display:inline block；}
h3{行高：0；}
您看到的是所谓的边距折叠。