css - margin外邊距的塌陷問題
阿新 • • 發佈：2022-05-19
margin塌陷現象：在垂直方向如果有兩個元素的外邊距有相遇，在瀏覽器中載入的真正的外邊距不是兩個間距的加和，而是兩個邊距中值比較大的，邊距小的塌陷到了邊距值大的值內部。
兄弟關係：
1. 同級元素塌陷：上面的元素有下邊距，下面的元素有上邊距，兩個邊距相遇，真正盒子間距離是較大的那個值。
父子關係：
2. 父子元素塌陷：父子元素之間也會出現margin塌陷，（1）父元素和子元素都設定了同方向的margin-top值，兩個屬性之間沒有其他內容進行隔離，導致兩個屬性相遇，發生margin塌陷。（2）本身父元素與上一個元素的距離是0，子元素如果設定了垂直方向的上邊距，會帶著父級元素一起掉下來（父元素的上邊距0塌陷到了子元素的上邊距50裡面）。解決方法：
（1）同級元素：如果兩個元素垂直方向有間距，只需要設定給一個元素，不要進行拆分。
（2）父子元素：讓兩個邊距不要相遇，中間可以使用父元素border或padding將邊距分隔開；更加常用的方法，父子盒模型之間的距離就不要用子元素的margin去設定，而是用父元素的padding擠出來。
注：水平方向沒有margin塌陷。
margin塌陷問題及解決