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