解決margin 外邊距合并問題
發(fā)布時間：2019-07-03 15:25:26 作者：佚名 
我要評論
我要評論這篇文章主要介紹了解決margin 外邊距合并問題 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
一、兄弟元素的外邊距合并
效果圖如下：（二者之間的間距為100px，不是150px）
二、嵌套元素的外邊距合并
對于兩個嵌套關(guān)系的元素，如果父元素中沒有內(nèi)容或者內(nèi)容在子元素的后面并且沒有上內(nèi)邊距及邊框，則父元素的上邊距會與子元素的上外邊距發(fā)生合并，且值為最大的那個上外邊距，同時該值作為父元素的上外邊距。即使父元素的上外邊距為0，也會發(fā)生合并。(只有垂直方向才會發(fā)生塌陷）
解決方法：
1. 為父元素定義1像素的上邊框。
2. 為父元素定義1像素的上內(nèi)邊距。
3. 為父元素添加overflow:hidden;
注意，第一種和第二種方法都不好，會撐大盒子的體積。第三種方法將溢出內(nèi)容隱藏，既不增大盒子體積，也不影響內(nèi)容。
總結(jié)
以上所述是小編給大家介紹的解決margin 外邊距合并問題 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
使用CSS實現(xiàn)三欄自適應(yīng)布局(兩邊寬度固定，中間自適應(yīng))
這篇文章主要介紹了使用CSS實現(xiàn)三欄自適應(yīng)布局(兩邊寬度固定，中間自適應(yīng)),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下2020-06-02
CSS實現(xiàn)三欄布局中間一欄自適應(yīng)且隨文字大小變化寬度的示例代碼
這篇文章主要介紹了CSS實現(xiàn)三欄布局中間一欄自適應(yīng)且隨文字大小變化寬度的示例代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需2020-06-02
CSS columns實現(xiàn)兩端對齊布局的示例代碼
這篇文章主要介紹了CSS columns實現(xiàn)兩端對齊布局效果,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-28
用CSS Grid布局制作一個響應(yīng)式柱狀圖的實現(xiàn)
這篇文章主要介紹了用CSS Grid布局制作一個響應(yīng)式柱狀圖的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編2020-05-26
這篇文章主要介紹了CCS中的margin：top塌陷問題,本文通過實例截圖給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-27
css如何利用負margin技術(shù)實現(xiàn)平均布局
這篇文章主要介紹了css如何利用負margin技術(shù)實現(xiàn)平均布局，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一2020-03-09
這篇文章主要介紹了CSS 外邊距(margin)重疊及防止方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-14
css 布局 之 兩端布局的實例代碼 （利用父級負的margin）
這篇文章主要介紹了css 布局 之 兩端布局 （利用父級負的margin）的實例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋2020-06-08
