這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)margin外邊距合并如何解決,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)建站主要從事網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)和縣,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):13518219792
一、兄弟元素的外邊距合并
效果圖如下:(二者之間的間距為100px,不是150px)
二、嵌套元素的外邊距合并
對(duì)于兩個(gè)嵌套關(guān)系的元素,如果父元素中沒(méi)有內(nèi)容或者內(nèi)容在子元素的后面并且沒(méi)有上內(nèi)邊距及邊框,則父元素的上邊距會(huì)與子元素的上外邊距發(fā)生合并,且值為最大的那個(gè)上外邊距,同時(shí)該值作為父元素的上外邊距。即使父元素的上外邊距為0,也會(huì)發(fā)生合并。(只有垂直方向才會(huì)發(fā)生塌陷)
解決方法:
1. 為父元素定義1像素的上邊框。
2. 為父元素定義1像素的上內(nèi)邊距。
3. 為父元素添加overflow:hidden;
注意,第一種和第二種方法都不好,會(huì)撐大盒子的體積。第三種方法將溢出內(nèi)容隱藏,既不增大盒子體積,也不影響內(nèi)容。
上述就是小編為大家分享的margin外邊距合并如何解決了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。