外边距塌陷
1479人閱讀
（這是我第一篇博客，排版不好多有見諒）
外邊距合并也叫作外邊距塌陷，那什么是外邊距塌陷？
滿足以下條件就會產生外邊距塌陷現象：
1，子元素在父元素里面
2，子元素中有margin-top或者margin-bottom值
?
此時已經產生外邊距塌陷
那么該怎么解決呢，個人認為有七種方式：
?
第一種：給父元素增加內邊距padding值，如圖所示：
第二種方式：父元素增加邊框border值，如圖所示：
?第三種方式：父元素增加overflow：hidden，如圖所示：
?第四種方式：給父元素或者子元素增加浮動，讓其脫離標準流都可以，如圖所示：
?
?第五種：將父元素轉變為行內塊元素，display：inline-block，如圖所示：
?第六種：給父元素或者子元素定位都可以，原理同樣是使其脫離標準流，不過只能用絕對定位和固定定位，如圖所示：
?
?第七種：給父盒子增加flex或者inline-flex，如圖所示：
?好了，以上就是解決外邊距塌陷的七種方法，如果還有其他方法，本人愿意請教。
?
在最后，給大家附上我前幾天問大佬該問題，大佬給我的回復
來自大佬??CSDN專家-天際的海浪 的對于此問題的回復
讓元素形成BFC的布局就可以解決外邊距塌陷
BFC全稱是box-formatting-context (塊級格式化上下文) 它是一個獨立的渲染區域規定了內部block-level的盒子如何渲染并且不影響外部元素。
BFC的規則或者說是特點
1.獨立且隔離的一個區域
2.里面的盒子垂直排列
3.屬于同一個BFC相鄰的倆個盒子（父子關系 相鄰的兄弟關系）會有內邊距重疊
4.BFC的區域不會與float重疊；
5.計算BFC的高度時，浮動元素也參與計算。
創建BFC（解決方案）：
1、border-top：1px solid;（這個解決方法最好，但它其實并不是BFC，相當于加了一堵墻不讓margin-top沖出去。下面的 2-6 都是BFC，雖然可以解決問題，但有一些副作用，很有可能會影響原來元素的功能，比如父元素本來不應該浮動，雖然你設置浮動之后解決margin塌陷但是使得元素本來的正常功能受到影響）
2、浮動元素（元素的 float 不是 none）
3、絕對定位元素（元素的 position 為 absolute 或 fixed）
4、行內塊元素
5、overflow 值不為 visible 的塊元素
6、彈性元素（display為 flex 或 inline-flex元素的直接子元素）
?
?
?
前端csscss3html
發布于2022-02-21著作權歸作者所有
相關推薦更多
解決外邊距坍塌的幾種方法
邪人君子?1787 閱讀??0 評論
CSS中如何解決外邊距塌陷問題
weixin_38729438?0 下載
css外邊距塌陷(margin-top無效果)原因和解決辦法
yangyangdt?1440 閱讀??0 評論
外邊距塌陷的現象和八種解決方法
|Mark|?758 閱讀??0 評論
外邊距塌陷的解決方法
Brc?174 閱讀??1 評論
熱門推薦?什么是外邊距塌陷？
愛喝冬瓜湯的外星人?1萬+ 閱讀??1 評論
輕松解決外邊距塌陷的幾種方法(你值得收藏)_一個橙子的...
解決方案: 1. 給父元素加邊框border 2. 給父元素加內邊距padding 3. 給父元素加overflow:hidden *{margin:0;padding:0;}.father{width:300px;height:300px;background-color:pink;/*border: 1px solid pink;*//*padding: 1px...
如何解決CSS外邊距塌陷的問題_一心一意對前端的博客
首先我們先看出現外邊距塌陷的三種情況: 1.當上下相鄰的兩個塊級元素相遇,上面的元素有下邊距margin-bottom,下面的元素有上邊距margin-top,則它們之間的垂直距離取兩個值中的較大者。 .box1 { width: 150px; height: 100px; ma...
css高度塌陷和外邊距塌陷的原因及解決辦法_風啞的博客...
1) 高度塌陷是因為父元素沒有設高,而子元素浮動脫標,造成父元素高度為0產生塌陷。 常見的解決辦法: 1.給父元素設置高度 2.設置父元素的顯示模式為flex 3.設置父元素overflow為hidden 2)?外邊距塌陷分為嵌套盒子塌陷和兄弟盒子塌陷?...
外邊距合并和塌陷問題及解決方法_陳閑之的博客
注意,第一種和第二種方法都不好,會撐大盒子的體積。第三種方法將溢出內容隱藏,既不增大盒子體積,也不影響內容。 2.外邊距塌陷?? 嵌套的父子盒子,子盒子需要向下移動,然后添加外邊距,但是移動的卻是父盒子,這就是外邊距塌陷。
在html中通過使用css解決外邊距重疊(外邊距塌陷)問題
1.外邊距重疊也可以稱之為外邊距塌陷,我們在設置外邊距時,當兩個垂直外邊距相遇時,它們將形成一個外邊距。 合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。 接下來我們進行代碼演示 第一步:老規矩先來一個框架 ...
輕松解決外邊距塌陷的幾種方法(你值得收藏)
一個橙子的奇遇記?7410 閱讀??6 評論
關于外邊距塌陷問題的解決方案你知道哪些？
是！豆哈哈?682 閱讀??5 評論
詳解 CSS?外邊距重疊(外邊距塌陷)問題及解決辦法
木一易@?2151 閱讀??2 評論
最新發布?完美解決外邊距塌陷的五種方法
小阿哈?50 閱讀??0 評論
總結
- 上一篇： 互联网基础结构发展的三个阶段
- 下一篇： 使用jquery获取url及url参数的