css的margin重叠问题

来源：互联网发布：中国ntp时间服务器端口编辑：程序博客网时间：2024/05/04 23:39

1.问题场景

2.我的实际问题

由于两个margin边框重合，导致margin-top:80px;属性无法正常显示。（由于面包屑导航模块高度大于80px，故无法显示）3.解决方案在区块二中增加float: left;margin-left: 85px;属性。（由于设置了float:left;属性，要使区块二显示在中间，又增加了margin-left: 85px;属性。ps:本人遇到这个问题时，google后就增加了float: left;属性，当时感觉这个属性把界面调乱了，就果断放弃了这个方法，多次尝试其他方法后，无果。又增加了margin-left: 85px;属性，解决了这个问题）4.为什么这样就可以了？相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。5.还有什么避免margin重叠的方法？

（1）水平边距永远不会重合。

（2）根元素的垂直margin不会被重叠。（3）相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。（4）设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）。（5）设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样。（6）设置了display:inline-block的元素，垂直margin不会重叠，甚至和他们的子元素之间也是一样。

6.为什么要这样呢？

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。7.由css的margin重叠引申到css的重叠问题

刚才google了css重叠的问题，发现处理方法与上述方法雷同，当然，今后再碰到类似问题，可参考此篇博客，然后具体情况具体分析。

1 0