只有普通文件流中塊元素的垂直邊界才會發生邊界疊加。行內框、浮動框或絕對定位框之間的邊界不會疊加。
1.發生外邊距疊加的情況
外邊距(margin)重疊示例
1.1外邊距重疊是指兩個垂直相鄰的塊級元素，當上下兩個邊距相遇時，起外邊距會產生重疊現象，且重疊後的外邊距，等於其中較大者。
1.2另乙個重疊現象是當乙個元素包含在另乙個元素之中時，子元素與父元素之間也會產生重疊現象，重疊後的外邊距，等於其中最大者：
1.3同理，如果乙個無內容的空元素，其自身上下邊距也會產生重疊。
2如何解決:
雖然外邊距的重疊有其一定的意義，但有時候我們在設計上卻不想讓元素之間產生重疊，那麼可以有如下幾個建議可供參考：
2.1外層元素padding代替
2.2內層元素透明邊框 border:1px solid transparent;
2.3內層元素絕對定位 postion:absolute:
2.4外層元素 overflow:hidden;
2.5內層元素 加float:left;或display:inline-block;
2.6內層元素padding:1px;
3.外邊距重疊的意義外邊距的重疊只產生在普通流文件的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段落p）時，那麼塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。
行內元素和margin疊加問題
行內元素正常狀態 行內元素設定寬高沒效,width 100px height 1000px 行內元素設定margin top，margin bottom無效,margin left,margin right有效 行內元素設定line height 100px 有效 行內元素變成塊狀，display ...
margin疊加問題及解決辦法
css外邊距 margin 重疊問題 兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會摺疊 外邊距重疊是指兩個垂直相鄰的塊級元素，當上下兩個邊距相遇時，其外邊距會產生重疊現象，且重疊後的外邊距，等於其中較大者。同理，如果乙個無內容的空元素，其自身上下邊距也會產生重疊。防止外邊距重疊解決...
CSS中margin邊界疊加問題及解決方案
你對css的margin邊界疊加的概念是否了解，這裡和大家分享一下，當乙個元素出現在另乙個元素上面時，第乙個元素的底邊界與第二個元素的頂邊界發生疊加。css的margin邊界疊加深度剖析 邊界疊加簡介 邊界疊加是乙個相當簡單的概念。但是，在實踐中對網頁進行布局時，它會造成許多混淆。簡單地說，當兩個垂...