Html 在div问题中将边距设置为单个页眉标记

下面我在一个div中有一个h3标签

#one {
  width:300px;
  height:200px;
  background-color:black;
  color:white;
}

h3 {
 margin-top:20px;
}

    <div id="one">
<h3>Coming Soon My Tools</h3>
</div>​

#一个{
宽度：300px；
高度：200px；
背景色：黑色；
颜色：白色；
}
h3{
边缘顶部：20px；
}
我的工具很快就要来了
​

渲染时，将移动div的上边缘，而不是h3标记的上边缘。见演示

有人知道为什么会这样吗

---

如果我在h3标记之前的div中放置了一些内容，那么边距会正确调整，如果我将display:inline块添加到h3标记中，那么它也会正确渲染<我不是在寻找解决我问题的办法。我在寻找关于这个问题的信息。以前有人遇到过这个问题吗？

只要把它插到你的小提琴上就行了。我建议你也这样做：

#one {
  width:300px;
  height:200px;
  background-color:black;
    color:white;
    border: 1px solid 0000ff;
}

h3 {
 margin-top:20px;
 border: 1px solid #00ff00;
}

---

保证金似乎工作正常（我在IE7这里）。距离是在

h3

顶部和div边框之间创建的。这是边距。

我现在找不到支持我想法的信息，但据我所知，div是一个没有边距的盒子。所以你会得到一个“利润崩溃”的div利润和h3利润。如果在div和h3标记之间添加任何文本，实际上会创建一个新块，并且h3边距将作为偏移添加到该块。 在div中添加1px边框也是如此。“折叠”行为随即消失。

---

如上所述，我找不到支持这一点的信息，但摆弄你的url表明了这一行为。

your right！。没有对div应用边界导致了保证金崩溃。