雙邊距重疊問題（外邊距折疊）

行元素：不會獨占一行，width和height會失效，并且在垂直方向的padding和margin也會失效。
塊元素：占據一行，并且自動填滿父元素，可以設置margin，padding，高和寬。
多個相鄰，普通流的塊元素垂直方向的margin重疊。
html

<div class="div1">第一個盒子</div> <div class="div2">第二個盒子</div>

css

.div1{width: 100px;height: 100px;background: #0000FF;margin: 10px 20px;}.div2{width: 100px;height: 100px;background: #FF0000;margin: 30px 40px;}

效果

當兩者外邊距為正時，重疊區域的外邊距為兩者中的較大值30px，chrome中如果七大屬性值加起來不等于父元素寬時，則margin-right自動設置為auto。
css

.div2{width: 100px;height: 100px;background: #FF0000;margin: -30px 10px;}

效果

當兩者外邊距為一正一負時，折疊結果為兩者相加的和-20px,會產生覆蓋。
css

.div1{width: 100px;height: 100px;background: #0000FF;margin: -30px 20px;}.div2{width: 100px;height: 100px;background: #FF0000;margin: -10px 10px;}

效果

當兩者外邊距都為負數時，折疊結果為兩者絕對值中的較大值的相反數，-30px.

總結

以上是生活随笔為你收集整理的双边距重叠问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。