0

下面我在 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 中放置一些东西，那么边距会正确调整，如果我将 display: inline-block 添加到 h3 标签，它也会正确呈现。我不是在寻找解决我的问题的方法。我正在寻找有关该问题的信息。以前有没有其他人遇到过这个问题？

4

2 回答 2

1

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

于 2012-05-16T17:00:31.733 回答
0

只需将其插入您的小提琴。我建议你这样做：

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

于 2012-05-16T16:55:30.950 回答