13.外边距合并问题

关于外边距合并问题及解决方案

提示:水平margin不会被合并，垂直margin会被合并！

方法1:设置了的overflow属性的盒模型，则其与子元素之间的垂直margin不会合并，但其与父元素之间、与相邻元素之间的margin会合并。（overflow取值为visible除外）

方法2:设置了float属性的盒模型，则其与相邻元素之间、其与父元素之间、其与子元素之间的垂直margin都不会被合并。

方法3:设置了绝对定位position:absolute的盒模型，则其与相邻元素之间、其与父元素之间、其与子元素之间的垂直margin都不会被合并。（但应注意position:absolute对其后元素的position的影响）

方法4:设置了display:inline-block的盒模型，则其与相邻元素之间、其与父元素之间、其与子元素之间的垂直margin都不会被合并。

      相邻元素的margin是否被折叠会影响元素的位置

      防止外边距合并解决方案：

      1.防止元素与子元素margin重叠（嵌套关系）：

      用内层元素的margin通过外层元素的padding代替；

      内层元素透明边框 border:20px solid transparent/父元素background-color;

      外层元素 overflow:hidden;/overflow:auto;

      2.防止元素与子元素、与父元素。与相邻元素的重合（嵌套与相邻关系）：

      设置元素绝对定位 postion:absolute;或float:left;或display:inline-block;