CSS Margins奇怪的行为

Question

我不明白以下行为： jsFiddle

如果我选择div并设置top和bottom margins且div设置为height且0px，则只有最高边距为使用，但如果我将div的高度设置为1px，则一切正常。

为什么会这样？

---

修改

基于@Krzysztof引用的文章Trzos的answer我理解这种行为是基于

  

空块

     

如果没有边框，填充，内联内容，高度或最小高度将块的边缘顶部与其边距底部分开，则其顶部和底部边距会崩溃。

在同一篇文章中写有

  

浮动和绝对定位元素的边距从不崩溃。

为防止这种情况发生，您可以设置float:left属性或overflow:auto
（thx to @ SW4 for second）

Answer 1

尝试使用padding代替margin

http://jsfiddle.net/qa011xhu/1/

我认为边缘的事情是它自身重叠。就像它会有两个容器一个在另一个之上，第一个容器将margin-bottom: 10px;和第二个margin-top: 10px;。它们之间会有10px的空间，而不是20px。

并且，发现这篇文章：

https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

  

空块

     

如果没有边框，填充，内联内容，高度或最小高度将块的边距顶部与其边距底部分开，则其顶部和底部边距会崩溃。

Answer 2

这是由于margin collapsing

  

块的顶部和底部边距有时会合并（折叠）   单个保证金，其大小是合并的最大边际   进入它，一种称为边缘崩溃的行为。

您可以使用填充，或使用overflow:auto或overflow:hidden

在折叠元素上强制执行新的block formatting context来克服它

  

块格式化上下文是a的可视CSS呈现的一部分   网页。它是块框布局的区域   并且漂浮物彼此相互作用。