如何理解HTML外边距折叠,详解CSS外边距折叠引发的问题

第一种：两个块级元素的上下边距折叠

第二种：父元素和子元素(或者最后一个元素)的外边距

第三种：空的块级元素的上下外边距

折叠的根本原因：

margin之间直接接触，没有阻隔

折叠后外边距的计算：

1.如果两个外边距都是正值，折叠后的外边距取较大的一个

2.如果两个外边距一正一负，折叠后的边距为边距之和

3.如果两个外边距都为负数，折叠后边距为较小的边距

解决方案：解决方法实际上也就是阻止外边距直接接触

第一种、第三种：只有静态流的元素才会发生外边距合并故设置float position inline-block都可以

.bother{

width: 50px;

height: 50px;

margin: 50px;

background-color: #44cc00;

/*1.float: left;*/

/*2.position: absolute;*/

}

/*.father{*/

/*2.position: relative;*/

/*background:#cccdd1;*/

/*}*/

/*.bother1{*/

/*2.top:50px;*/

/*}*/

/*.bother2{*/

/*2.top:250px;*/

/*}*/

第二种(嵌套的情况)只要border padding非0或者有inline元素隔开，比如在父元素里加一行文字也可以

.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{

background:#cccdd1;

/*1.border: 1px solid;*/

/*2.padding: 20px;*/

/*5.1 display: inline-block;*/

/*如果没有border和padding只有测试这个字，那么子元素的外边距不会在父元素里显示*/

/*而仅仅只有上外边距显示，下外边距不显示*/

/*而如果在子元素下面同样写一个测试，那么下外边距也会显示*/

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。