第一个孩子的上边距和最后一个孩子的下边距

Question

HTML

<div class="lev1">level1</div>
<div class="lev2wrap">
<div class="lev2">level2</div>
<div class="lev2">level2</div>
<div class="lev2">level2</div>
<div class="lev2">level2</div>
</div>

CSS

.lev1{
  background:lightblue;
}
.lev2wrap{
  background:gold;
}
.lev2{
  background:#999999;
  margin:10px 0;
}

为什么lev2的第一个实例没有10px的上边距，为什么lev2的最后一个实例没有10px的下边距？

相反，lev2wrap有一个上边距和下边距，但这不是CSS指令。

JSFIDDLE

Answer 1

由于collapsing margins。

  

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

     

保证金崩溃发生在三个基本情况中：

     

  
• 相邻的兄弟姐妹
  
• 父母和第一个/最后一个孩子
  
• 空块
  

要显示lev2wrap的边距，请向其添加overflow：auto：

.lev2wrap {
  background: gold;
  overflow: auto;
}

<强> jsFiddle example