margin塌陷如何解决
生活随笔
收集整理的這篇文章主要介紹了
margin塌陷如何解决
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
導致邊距塌陷的兩種情況:
1. 同級元素塌陷
兩個同級元素，垂直排列。上面的盒子給了margin-bottom，下面的盒子給了margin-top。那么這兩個邊距將會重疊，按照大的值來計算。
?
此時兩個盒子，father設置了20px的下邊距，son設置了30px的上邊距，但是最終兩個盒子之間的邊距為30px 只保留了最大的值son的上邊距。
解決辦法：簡單粗暴——不讓這兩個邊距同時出現(xiàn)。
2. 父子元素塌陷
兩個父子元素，內部的子盒子給了margin-top，父元素也會受到影響，同時產(chǎn)生上邊距，也就是父子重合（粘連）。
?
?
解決方法：
1 ：給父盒子設置border，添加border后父盒子和子盒子就不會貼在一起了
這里可以給邊框顏色設置為透明色 這樣不會影響效果
?
?
2 給父盒子添加overflow：hidden? 讓他溢出隱藏
?
?
3?給父盒子設定padding值?
注意：此方法會撐大父盒子
?
?
4 給父盒子添加position：fixed?
?
?
?方法不全 感興趣的可以去查閱更多資料 謝謝大家！?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
總結
以上是生活随笔為你收集整理的margin塌陷如何解决的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux虚拟机与主机共享文档
- 下一篇： 解决margin塌陷问题