Css 的 Margin 边缘叠加问题

注意:
1. 外边距叠加情况只会发生在普通文档流的垂直方向.
2. 行内框、浮动框、绝对定位框之间的外边距不会发生叠加，同样水平方向也不会发生叠加。

我觉得叠加问题大致分两种情况:

• 当两个垂直布局时，第一个的margin-bottom 和 第二个的 margin-top 将会重叠合成一个外边距，这个外边距的高度等于两个发生叠加的外边距中高度较大者。

image.png

• 两个 view 嵌套的情况(即 view1 包含 view2 ), 这时你会发现,当你给 view2 设置 margin-top 的时候, view2 还是紧贴view1 的顶部; view1 距顶部的距离就是 view2 的 margin-top.

什么结论? 当遇到view嵌套的情况, 给其包含的subView设置 margin-top,都会统统的转化成最外面的view 的margin-top, 并且取值最大那个, 而subView的上面距为 0, 做了个无用功

注意: 其左边距是生效的

WechatIMG325.jpg

• 处理margin叠加的解决方案:

方法1:利用flex布局对子元素的影响解决

子元素的float、clear和vertical-align属性将会失效；
解决了margin传递、重叠（叠加）问题；

方法2：利用外层padding值代替内部元素的margin；

方法3：绝对定位postion:absolute；

方法4：给父元素加边框 border（可以加个透明的边框）

方法5：给父级或者子级设置float