關於外邊距合並問題及解決方案


提示:水平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;
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM