CSS - 为什么不能div包装h1元素？

Question

<div id="title">
    <h1>
        Title
    </h1>
</div>

我知道有一些默认保证金以及h1标记。当我使用chrome dev工具查看时，我发现div部分小于h1部分（h1突出显示的区域大于div）。似乎div不包括h1的边距，任何人都可以告诉我为什么？

Answer 1

来自2.1 Spec:

  

“如果元素没有顶部边框，没有顶部填充，并且孩子没有间隙，则流入块元素的上边距会与其第一个流入块级子元素的上边距折叠。”

---

此外：

• 浮动元素的边距永远不会崩溃，即使是流入的块后代也不会崩溃
• 内联块元素的边距永远不会崩溃，即使是流入块后代也不会崩溃
• 阻止overflow属性值不是visible的容器没有折叠边距，甚至没有流入块后代
• 绝对/固定定位元素的边距不会崩溃，即使是流入的后代也不会崩溃
• 相邻弹性项目的边距不会崩溃
• 水平边距永不崩溃

关于负边距折叠，2.1 Spec states：

  

“在负边距的情况下，负相邻边距的绝对值的最大值从正相邻边距的最大值​​中减去。如果没有正边距，则相邻边距的绝对值的最大值从零开始扣除。“