解決margin 外邊距合并問(wèn)題
我要評(píng)論一、兄弟元素的外邊距合并
效果圖如下：（二者之間的間距為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)容。
總結(jié)
以上所述是小編給大家介紹的解決margin 外邊距合并問(wèn)題 ,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
使用CSS實(shí)現(xiàn)三欄自適應(yīng)布局(兩邊寬度固定，中間自適應(yīng))
這篇文章主要介紹了使用CSS實(shí)現(xiàn)三欄自適應(yīng)布局(兩邊寬度固定，中間自適應(yīng)),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下2020-06-02
CSS實(shí)現(xiàn)三欄布局中間一欄自適應(yīng)且隨文字大小變化寬度的示例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)三欄布局中間一欄自適應(yīng)且隨文字大小變化寬度的示例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需2020-06-02
CSS columns實(shí)現(xiàn)兩端對(duì)齊布局的示例代碼
這篇文章主要介紹了CSS columns實(shí)現(xiàn)兩端對(duì)齊布局效果,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-28
用CSS Grid布局制作一個(gè)響應(yīng)式柱狀圖的實(shí)現(xiàn)
這篇文章主要介紹了用CSS Grid布局制作一個(gè)響應(yīng)式柱狀圖的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2020-05-26
這篇文章主要介紹了CCS中的margin：top塌陷問(wèn)題,本文通過(guò)實(shí)例截圖給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-27
css如何利用負(fù)margin技術(shù)實(shí)現(xiàn)平均布局
這篇文章主要介紹了css如何利用負(fù)margin技術(shù)實(shí)現(xiàn)平均布局，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一2020-03-09
這篇文章主要介紹了CSS 外邊距(margin)重疊及防止方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-14
css 布局 之 兩端布局的實(shí)例代碼 （利用父級(jí)負(fù)的margin）
這篇文章主要介紹了css 布局 之 兩端布局 （利用父級(jí)負(fù)的margin）的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋2020-06-08
