如何理解margin重叠问题
生活随笔
收集整理的這篇文章主要介紹了
如何理解margin重叠问题
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、寫(xiě)在前面
根據(jù)w3c規(guī)范，兩個(gè)margin產(chǎn)生折疊的必備條件：
二、例子
<!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>經(jīng)過(guò)驗(yàn)證，兩者的距離為15px，原因如下：
1、空的p標(biāo)簽會(huì)重疊 2、margin-top和margin-bottom會(huì)重疊，所以距離為15px。margin為負(fù)值時(shí)的注意事項(xiàng)：
1、margin-left為負(fù)值時(shí)，自身元素會(huì)向左移動(dòng)。 2、margin-top為負(fù)值時(shí)，自身元素會(huì)向上移動(dòng)。 3、margin-right為負(fù)值時(shí)，自身元素不受影響，但是相鄰元素會(huì)向左移動(dòng)。 4、margin-bottom為負(fù)值時(shí)，自身元素不受影響，但是相鄰元素會(huì)向上移動(dòng)。 5、position:absolute時(shí)，margin-right和margin-bottom為負(fù)值時(shí)，自身元素會(huì)受影響。三、遇到面試題我們可以這樣回答
margin重疊是指在垂直方向上，相鄰的兩個(gè)元素的margin會(huì)發(fā)生重疊的情況。一般來(lái)說(shuō)分為以下4種情況：
3.1、相鄰兄弟元素的margin-bottom和margin-top發(fā)生重疊，這時(shí)候我們可以設(shè)置其中一個(gè)元素為BFC即可解決
3.2、父元素的margin-top和子元素的margin-top發(fā)生重疊，他們發(fā)生重疊是因?yàn)檫@兩個(gè)元素是相鄰的，所以可以通過(guò)以下幾種方法來(lái)解決：
3.3、高度為auto的父元素的margin-bottom和最后一個(gè)子元素的margin-bottom發(fā)生重疊，他們發(fā)生重疊一個(gè)原因是他們是相鄰的，另一個(gè)原因是父元素的高度是不固定的，那么可以通過(guò)以下幾種方法來(lái)解決：
1、為父元素設(shè)置padding-bottom或border-bottom將他們分開(kāi)。 2、 把父元素設(shè)置為BFC。 3、 父元素和最后一個(gè)子元素之間添加一個(gè)內(nèi)聯(lián)元素進(jìn)行分割。 4、 為父元素設(shè)置一個(gè)高度，height、max-height或者min-height都可以解決3.4、沒(méi)有內(nèi)容的元素，自身的margin-top和margin-bottom發(fā)生重疊，可以通過(guò)以下幾種方法解決：
1、元素設(shè)置padding或border。 2、給元素設(shè)置一個(gè)高度。總結(jié)
以上是生活随笔為你收集整理的如何理解margin重叠问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 2020.10.28----HashMa
- 下一篇： 电阻标称值E24等系列