1.margin合并：
（1）块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化。
（2）只发生在垂直方向，需要注意的是，这种说法在不考虑writing-mode的情况下才是正确的，严格来讲，应该是只发生在和当前文档流方向的相垂直的方向上。由于默认文档流是水平流，因此发生margin合并的就是垂直方向。
2. 合并的3种场景
（1）相邻兄弟元素margin合并：
p { margin: 1em 0; }<p>第一行</p><p>第二行</p>
（2）父级和第一个/最后一个子元素:
<div class="container">
<h2>CSS世界</h2>
</div>
CSS：
.container {
max-width: 1920px;
height: 384px;
background: url(cover.jpg) no-repeat center; }
.container > h2 {
font-size: 128px; margin-top: 100px; color: #fff; }
(3) 空块级元素的margin合并
3.如何阻止margin合并：
对于margin-top合并，可以进行如下操作（满足一个条件即可）：
(1) 父元素设置为块状格式化上下文元素；
(2) 父元素设置border-top值；父元素设置padding-top值；
(3) 父元素和第一个子元素之间添加内联元素进行分隔。
对于margin-bottom合并，可以进行如下操作（满足一个条件即可）：
(4) 父元素设置为块状格式化上下文元素；
(5) 父元素设置border-bottom值；
(6) 父元素设置padding-bottom值；
(7) 父元素和最后一个子元素之间添加内联元素进行分隔；
(8) 父元素设置height、min-height或max-height。
所以，上面因为margin合并导致头图掉下来的问题可以添加下面的CSS代码进行修复：
.container { overflow: hidden;}
4. 如果有人不希望空<div>元素有margin合并，可以进行如下操作：
（1）设置垂直方向的border；
（2）设置垂直方向的padding；
（3）里面添加内联元素（直接Space键空格是没用的）；
（4）设置height或者min-height。
5. margin合并的计算规则
（1）正正取大值。如果是相邻兄弟合并：
.a { margin-bottom: 50px; }
.b { margin-top: 20px; }
<div class="a"></a>
<div class="b"></a>
此时.a和.b两个<div>之间的间距是50px，取大的那个值
如果是父子合并:
.father { margin-top: 20px; }
.son { margin-top: 50px; }
<div class="father">
<div class="son"></div>
</div>
此时.father元素等同于设置了margin-top:50px，取大的那个值
如果是自身合并
.a { margin-top: 20px; margin-bottom: 50px;}
<div class="a"></div>
则此时.a元素的外部尺寸是50px，取大的那个值。
（2）正负值相加。如果是相邻兄弟合并：
.a { margin-bottom: 50px; }
.b { margin-top: -20px; }
<div class="a"></a>
<div class="b"></a>
此时.a和.b两个<div>之间的间距是30px，是-20px+50px的计算值。如果是父子合并
(3) 负负最负值。如果是相邻兄弟合并：
.a { margin-bottom: -50px; }
.b { margin-top: -20px; }
<div class="a"></a>
<div class="b"></a>
取负值最大的，所以a和b之间的间距是-50px
例子：水平方向和垂直方向同时居中:
<div class="father">
<div class="son"></div>
</div>
CSS：
.father {
width: 300px;
height: 150px;
background-color: #f0f3f9;
position:relative;
}
.son {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 100px;
background-color: #cd0000;
margin: auto;
}
网友评论