共计 1269 个字符，预计需要花费 4 分钟才能阅读完成。
CSS 外边距折叠
第一种：两个块级元素的上下边距折叠第二种：父元素和子元素（或者最后一个元素）的外边距第三种：空的块级元素的上下外边距折叠的根本原因：margin 之间直接接触，没有阻隔折叠后外边距的计算：1. 如果两个外边距都是正值，折叠后的外边距取较大的一个 2. 如果两个外边距一正一负，折叠后的边距为边距之和 3. 如果两个外边距都为负数，折叠后边距为较小的边距解决方案：解决方法实际上也就是阻止外边距直接接触第一种、第三种：只有静态流的元素才会发生外边距合并故设置 float position inline-block 都可以
<style>
.bother{
width: 50px;
height: 50px;
margin: 50px;
background-color: #44cc00;
/*1.float: left;*/
/*2.position: absolute;*/
<!–3.display: inline-block;–>
}
/*.father{*/
/*2.position: relative;*/
/*background:#cccdd1;*/
/*}*/
/*.bother1{*/
/*2.top:50px;*/
/*}*/
/*.bother2{*/
/*2.top:250px;*/
/*}*/
</style>
<body>
<div class=”father”>
<div class=”bother1 bother”></div>
<div class=”bother2 bother”></div>
</div>
</body>
第二种（嵌套的情况）只要 border padding 非 0 或者有 inline 元素隔开，比如在父元素里加一行文字也可以
<style>
.margin-box{
width: 50px;
height: 50px;
/*margin: 50px; 设置了上下左右的外边距 */
margin: 50px;
/*margin-left: 50px;*/
/*margin-right: 50px;*/
/*div 是块级元素，所以设置左右外边距也不会使父元素有左右外边距 */
background-color: #fae900;
/*5.2 display: inline-block;*/
}
.father{
<!–3.overflow: hidden;–>
background:#cccdd1;
/*1.border: 1px solid;*/
/*2.padding: 20px;*/
/*5.1 display: inline-block;*/
/* 如果没有 border 和 padding 只有测试这个字，那么子元素的外边距不会在父元素里显示 */
/* 而仅仅只有上外边距显示，下外边距不显示 */
/* 而如果在子元素下面同样写一个测试，那么下外边距也会显示 */
}
</style>
</head>
<body>
<div class=”father”>
<!–4.<span> 测试 </span>–>
<div class=”margin-box”></div>
<!–4.<span> 测试 </span>–>
</div>
</body>
