在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边界之间创建距离。 那是保证金。