在 div 问题中将边距设置为单个标头标记

Question

下面我有一个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>​

呈现时，div 的上边距正在移动，而不是 h3 标记的上边距。 请参阅演示 http://jsfiddle.net/EnigmaMaster/aZnjx/1/有谁知道为什么会这样？

如果我在 h3 标签之前的div 内放了一些东西，那么边距会正确调整，如果我在 h3 标签中添加 display： inline-block，它也会正确呈现。我不是在寻求解决我的问题的方法。我正在寻找有关该问题的信息。以前有没有其他人遇到过这个问题？

Answer 1

我现在

找不到支持我的想法的信息，但据我所知，div 是一个没有边距的盒子。因此，您将获得div 边距和 h3 边距的"边距崩溃"。如果在div 和 h3 标签之间添加任何文本，则实际上会创建一个新块，并且 h3 边距将作为该块的偏移量添加。向div 添加 1px 边框也是如此。然后，"崩溃"行为消失了。如前所述，我找不到支持这一点的信息，但摆弄您的 url 可以演示这种行为。

Answer 2

刚刚把它

插入你的小提琴。我建议你也这样做：

#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 边框之间创建距离。这就是利润。