我注意到为display:block元素添加边框会改变他们尊重内在元素的方式。 margin-top值。
在以下示例中：http://jsfiddle.net/vbmaxgh0/2/，为什么＆＃34;无边框＆＃34;块元素的渲染大小与＆＃34; border＆＃34;相同块元素或＆＃34;内联块＆＃34;元件？
答案 0 :(得分：2)
由于保证金崩溃，您遇到了这个问题：
两个或多个方框的相邻边距（可能会也可能不会 兄弟姐妹）可以结合形成单一的边缘。结合的边缘 据说这种方式会崩溃，结果是合并后的利润率 称为崩溃边缘。
来源：W3C - 8.3.1 Collapsing margins
您还可以将overflow: auto;添加到#block以解决问题。
JSFiddle - DEMO
#block {
display: block;
overflow: auto; /* or overflow: hidden; */
}
进一步阅读::