前言
最近在學習很多開發過程中容易忽悠但是又很重要的知識點，很多時候用的少不代表它不重要，這裡將它們寫出來以記錄，如果有寫的不好的地方請指正。
概念margin合併是指塊級元素的上外邊距與下外邊距有時會合併為單個外邊距，有兩點需要理解。
場景一、相鄰兄弟元素margin合併
p 第一行第二行
因為第一行和第二行的元素合併在一起，所以他們的間距還是1rem，而並非上下相加。
二、父級和子元素
.div1
.div2
由於父級和子級元素的合併，所以頂部的margin為10px，而不是20px。
三、空級塊元素的合併
div1
div2
這個元素的margin-top和margin-bottom合併在一起，所以高度只有1rem。
解決方法
這裡的解決方法我們分為三種情況來討論，第一種就是解決兄弟元素之間的margin合併情況。
我們可以使用設定浮動元素來解決，例如：
p 第一行第二行
第二種是父級和子元素之間的margin合併，我們使用overflow屬性來解決，例如：
.div1
.div2
&程式設計客棧lt;/div>
當然，我們還可以通過設定父元素為塊狀格式化上下文元素、設定border、padding等方式來解決問題。
第三種情況就是空塊級元素的程式設計客棧合併，一般為空塊程式設計客棧級元素設定乙個高度就能夠避免margin合併的問題。
div1
div2
意義css中的margin合併是為了更好地進行**資訊展示而設計的，為了保證**資訊排版的舒服自然。我們不僅要理解它們存在的意義，而且要合理的運用它們。
以上就是本文的全部內容，希望對大家的學習有所幫助www.cppcns.com，也希望大家多多支援我們。
本文標題: 正確理解css中的margin合併的用法
本文位址:
點讚打賞
分享如果認為本文對您有所幫助請贊助本站
標籤：css margin 合併
前端相容性問題總結(pc端) css 樣式書寫規範(推薦)
正確理解CSS中的margin合併
最近在學習很多開發過程中容易忽悠但是又很重要的知識點，很多時候用的少不代表它不重要，這裡將它們寫出來以記錄，如果有寫的不好的地方請指正。margin合併是指塊級元素的上外邊距與下外邊距有時會合併為單個外邊距，有兩點需要理解。1.在塊級元素中，不包括浮動和絕對定位元素 2.只發生在和當前文件流方向的相...
正確理解 clear both
要注意以下幾點 1 浮動元素會被自動設定成塊級元素，相當於給元素設定了display block 塊級元素能設定寬和高，而行內元素則不可以 2 浮動元素後邊的非浮動元素顯示問題。3 多個浮動方向一致的元素使用流式排列，此時要注意浮動元素的高度。4 子元素全為浮動元素的元素高度自適應問題。以下詳細分析...
正確理解 clear both
原文 要注意以下幾點 1 浮動元素會被自動設定成塊級元素，相當於給元素設定了display block 塊級元素能設定寬和高，而行內元素則不可以 2 浮動元素後邊的非浮動元素顯示問題。3 多個浮動方向一致的元素使用流式排列，此時要注意浮動元素的高度。4 子元素全為浮動元素的元素高度自適應問題。以下詳...