外邊距合併知識

一、什麼是外邊距合併

外邊距合併是指垂直相鄰的塊級元素在邊距相遇時會形成乙個外邊距，最終的外邊距以兩者中較大的為準。

二.外邊距合併的直觀例子

1.父子之間

1.1 父元素沒有margin-top,子元素有margin-top，合併後父元素的margin-top為子元素設定的，子元素的margin-top失效

演示**如下：

<

div 
class
="box1"
>
<
div 
class
="box2"
>
div>
div>

.box1.box2

p>注釋：請注意，如果不設定 div 的內邊距和邊框，那麼內部 div 的上外邊距將與外部 div 的上外邊距合併（疊加）。

p>

body

>

html

>

上述兩種情況的過程**如下

1.3乙個box的bottom margin(height 為auto的情況下)與最後乙個子box的bottom margin發生合併，box1與boxother的間距變成了50px而不是10，同時box3設定的margin-bottom失效了

2、當元素是兄弟元素時，在不設定float和position:absolute時上面的margin-bottom和下面的margin-top會自動的合併為兩者中的最大值

<

html
>
<
head
>
<
style 
type
="text/css"
>
* #d1 
#d2 
style
>
head
>
<
body
>
<
div 
id="d1"
>
div>
<
div 
id="d2"
>
div>
<
p>請注意，兩個 div 之間的外邊距是 20px，而不是 30px（20px + 10px）。
三、哪些情況會產生外邊距合併
四、如何避免外邊距合併
1.父子元素之間的外邊距合併(任選一種)
原理：生成了新的bfc
原理：垂直方向上不再產生毗鄰
2.同級垂直相鄰元素(任選一種)
原理：生成了新的bfc
給任意乙個盒子加display:inline-block;
原理：垂直方向上不再產生毗鄰
五、bfc知識
 
外邊距合併（外邊距塌陷）
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直間距不是margin bottom與margin top之和，而是兩者中的較大者。這種現象被稱...
外邊距塌陷 外邊距合併
1.父子塊級 元素外邊距塌陷 子元素加margin top,父元素也加margin top,如果父元素沒有設定margin top,那預設0,取的是其中最大 的值,這個效果作用父元素身上啦 原因 他倆共用乙個外邊距 解決 方法一 給父元素加 border padding 方法二 給父元素加overf...
外邊距合併
從3個簡單的小例子來看外邊距合併 給h1加50px的margin，但實際上h1和div的margin合併在一起了 detail設定margin為30px,header設定margin為30px，結果兩個相鄰元素之間的間距發生了合併 而且合併寬度是margin數值大的為準。如下圖detail和head...