1. 程式人生 > >CSS外邊距合併的問題及解決措施

CSS外邊距合併的問題及解決措施

針對CSS外邊距合併的問題,我針對網上一些解決措施,做了一些總結和驗證,總結如下:(水平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;