如何理解margin重叠问题
生活随笔
收集整理的這篇文章主要介紹了
如何理解margin重叠问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、寫在前面
根據w3c規范，兩個margin產生折疊的必備條件：
二、例子
<!DOCTYPE html> <html lang="cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-size: 16px;line-height: 1;margin-top: 10px;margin-bottom: 15px;}.aa {border-bottom: 1px solid red;}.bb {border-top: 1px solid red;}</style> </head><body><div><p class="aa">AAA</p><p></p><p></p><p></p><p class="bb">BBB</p></div></body></html>經過驗證，兩者的距離為15px，原因如下：
1、空的p標簽會重疊 2、margin-top和margin-bottom會重疊，所以距離為15px。margin為負值時的注意事項：
1、margin-left為負值時，自身元素會向左移動。 2、margin-top為負值時，自身元素會向上移動。 3、margin-right為負值時，自身元素不受影響，但是相鄰元素會向左移動。 4、margin-bottom為負值時，自身元素不受影響，但是相鄰元素會向上移動。 5、position:absolute時，margin-right和margin-bottom為負值時，自身元素會受影響。三、遇到面試題我們可以這樣回答
margin重疊是指在垂直方向上，相鄰的兩個元素的margin會發生重疊的情況。一般來說分為以下4種情況：
3.1、相鄰兄弟元素的margin-bottom和margin-top發生重疊，這時候我們可以設置其中一個元素為BFC即可解決
3.2、父元素的margin-top和子元素的margin-top發生重疊，他們發生重疊是因為這兩個元素是相鄰的，所以可以通過以下幾種方法來解決：
3.3、高度為auto的父元素的margin-bottom和最后一個子元素的margin-bottom發生重疊，他們發生重疊一個原因是他們是相鄰的，另一個原因是父元素的高度是不固定的，那么可以通過以下幾種方法來解決：
1、為父元素設置padding-bottom或border-bottom將他們分開。 2、 把父元素設置為BFC。 3、 父元素和最后一個子元素之間添加一個內聯元素進行分割。 4、 為父元素設置一個高度，height、max-height或者min-height都可以解決3.4、沒有內容的元素，自身的margin-top和margin-bottom發生重疊，可以通過以下幾種方法解決：
1、元素設置padding或border。 2、給元素設置一個高度。總結
以上是生活随笔為你收集整理的如何理解margin重叠问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2020.10.28----HashMa
- 下一篇： 电阻标称值E24等系列