为什么在div上设置保证金不会影响子内容的位置？

Question

我想更清楚地了解css边距如何与div和子内容一起使用。

如果我试试这个......

<div style="clear: both; margin-top: 2em;">
    <input type="submit" value="Save" />
</div>

...“保存”按钮正对着用户角色（保证金失败）：

---

Margin Fail :( http://img697.imageshack.us/img697/8459/nomargin.jpg

---

如果我把它改成这个......

<div style="clear: both;">
    <input style="margin-top: 2em;" type="submit" value="Save" />
</div>

...“保存”按钮和“用户角色”（保证金获胜）之间存在差距：

---

Margin Win :) http://img20.imageshack.us/img20/1973/yesmargin.jpg

---

问题：

有人能解释我在观察什么吗？为什么不在div上设置保证金导致input向下移动？为什么我必须将保证金放在input本身？必须有一些我没有掌握的基本css定律。

Answer 1

这是因为div没有“将自己推离”的元素。似乎select之前的div是浮动的。这导致它被取出正常页面流，并且它不再作为边际计算的参考。 div正在清除浮动，即它下降到它之下，然后测试它上面的下一个元素是否在同一“流”内的2em边距。显然有，所以它不会再向下移动。

另一方面，设置submit上的边距非常明确，因为它的参考框架是父div。

Answer 2

在元素上设置边距仅影响该元素的边距。你期待它是继承还是什么？事实并非如此。也许你在想padding？尝试：

<div style="clear: both; padding-top: 2em;">
  <input type="submit" value="Save" />
</div>

请参阅Box Model：

关于保证金的另一个注意事项是他们合并。所以：

<div>one</div>
<div>two</div>

使用：

div { margin: 1em; }

只会导致他们之间的差距不是2em。见8.3.1 Collapsing Margins：

  

垂直边距可能会崩溃   某些方框：

     

  
• 两个或多个相邻的block框的垂直边距   normal flow崩溃了。该   产生的边距宽度是最大的   相邻边距宽度。在里面   负边际的情况，最大值   绝对价值的负面   相邻的保证金从中扣除   最大的正相邻   利润率。如果没有积极的   边际，绝对最大值   扣除负邻接保证金   从零开始。 注意。相邻的框   可以由元素生成   与兄弟姐妹或祖先无关。
  

因此，您所看到的一个可能的解释是，div前面的元素已经有一个边距（在底部），这就是为什么不通过向div添加边距来降低它的原因。

基本上把边界放在一边，你应该看看发生了什么。

Answer 3

第一个例子中发生的事情是按钮上方的浮动元素浮动在它的父元素之外。

边距工作正常，但它不在浮动元素和tbe按钮之间，它位于浮动元素的父元素和按钮之间。父元素没有任何非浮动元素，因此它的高度为零，浮动元素与边距重叠。

Answer 4

在您的第一个示例中，您正在设置DIV本身的边距。将DIV视为包含嵌套元素的块。在这种情况下，嵌套元素将是按钮。如果您执行以下操作：

<div style="clear: both; margin-top: 2em;">
    <input type="submit" value="Save" />
</div>

您不会影响子元素样式。虽然按钮的相对位置可能会发生变化，但 实际上并未改变子元素的样式。现在做：

<div style="clear: both; margin-top: 2em;">
    <input type="submit" value="Save" />
</div>

您现在正在设置子元素边距。这会有不同的结果。设置此子元素边距不会对父元素（DIV）产生影响。