CSS外邊距重疊及防止方法

邊界重疊

是指兩個或多個盒子（父子或者兄弟之間）的相鄰邊界重合在一起而形成乙個單一邊界。

不會發生重疊的情況：

1 水平邊距不會發生重疊；

2 相鄰的盒模型中，如果其中乙個是float，垂直margin不會重疊，並且浮動的盒模型和它的子元素之間也一樣；

3 設定overflow 屬性的元素和它的子元素之間不會重疊，（overflow:visible除外）；

4 設定絕對定位的盒模型（相鄰or父子）；

5 設定display:inline-block的元素（相鄰or父子）；

重疊margin值的計算方法：

1 全部為+，取最大值；

2 全部為-，取絕對值，然後用0-最大值；

3 不全是正值，取絕對值，用正值-最大值；

外邊距重疊的意義：

外邊距的重疊只產生在普通流文件的上下外邊距之間。外邊距重疊，盒子之間就不會產生雙倍的距離。

防止外邊距重疊的解決方法：

1 外層元素psdding代替；

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

3 內層元素絕對定位position:absolute;

4 外層元素overflow:hidden;

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

6 內層元素 padding:1px;

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

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

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

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

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

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