CSS 外邊距 margin 重疊及防止方法

先來看看外邊距重疊是什麼

邊界重疊是指兩個或多個盒子(可能相鄰也可能巢狀)的相鄰邊界(其間沒有任何非空內容、補白、邊框)重合在一起而形成乙個單一邊界。

兩個或多個塊級盒子的垂直相鄰邊界會重合。結果的邊界寬度是相鄰邊界寬度中最大的值。如果出現負邊界，則在最大的正邊界中減去絕對值最大的負邊界。如果沒有正邊界，則從零中減去絕對值最大的負邊界。

注意：相鄰的盒子可能並非是由父子關係或同胞關係的元素生成。

但是邊界的重疊也有例外情況：

css 外邊距(margin)重疊及防止方法

外邊距重疊的意義

外邊距的重疊只產生在普通流文件的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段落p）時，那麼塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。

防止外邊距重疊解決方案：

雖然外邊距的重疊有其一定的意義，但有時候我們在設計上卻不想讓元素之間產生重疊，那麼可以有如下幾個建議可供參考：

外層元素padding代替

內層元素透明邊框 border:1px solid transparent;

內層元素絕對定位 postion:absolute:

外層元素 overflow:hidden;

內層元素 加float:left;或display:inline-block;

內層元素padding:1px;

原文：

CSS 外邊距 margin 重疊及防止方法

邊界重疊是指兩個或多個盒子 可能相鄰也可能巢狀 的相鄰邊界 其間沒有任何非空內容 補白 邊框 重合在一起而形成乙個單一邊界。兩個或多個塊級盒子的垂直相鄰邊界會重合。結果的邊界寬度是相鄰邊界寬度中最大的值。如果出現負邊界，則在最大的正邊界中減去絕對值最大的負邊界。如果沒有正邊界，則從零中減去絕對值最大...

CSS 外邊距 margin 重疊及防止方法

兩個或多個塊級盒子的垂直相鄰邊界會重合。結果的邊界寬度是相鄰邊界寬度中最大的值。如果出現負邊界，則在最大的正邊界中減去絕對值最大的負邊界。如果沒有正邊界，則從零中減去絕對值最大的負邊界。注意 相鄰的盒子可能並非是由父子關係或同胞關係的元素生成。但是邊界的重疊也有例外情況 1 水平邊距永遠不會重合。2...

CSS 外邊距 margin 重疊及防止方法

邊界重疊是指兩個或多個盒子 可能相鄰也可能巢狀 的相鄰邊界 其間沒有任何非空內容 補白 邊框 重合在一起而形成乙個單一邊界。兩個或多個塊級盒子的垂直相鄰邊界會重合。結果的邊界寬度是相鄰邊界寬度中最大的值。如果出現負邊界，則在最大的正邊界中減去絕對值最大的負邊界。如果沒有正邊界，則從零中減去絕對值最大...