雙邊距重疊問題

行元素：不會獨佔一行，width和height會失效，並且在垂直方向的padding和margin也會失效。

塊元素：佔據一行，並且自動填滿父元素，可以設定margin，padding，高和寬。

多個相鄰，普通流的塊元素垂直方向的margin重疊。

html

第乙個盒子

第二個盒子

.div1

.div2

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

css

.div2

css

.div1

.div2

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

Html 雙邊距問題

ie6中雙邊距bug 發生場合 當給父元素內第乙個浮動元素設定 margin left 元素float left 或margin right 元素float right 時margin 加倍。解決方法 是給浮動元素加上 display inline css屬性 或者用padding left代替ma...

邊距重疊問題

1 在布局的時候會碰見子元素設定邊距影響父元素的情況，對已經布局好的介面產生影響。parent child 正常情況下 當給child類新增margin 20px 屬性之後，檢視變成 父元素同時也margin影響 解決方法 1 給父元素設定邊框 border 1px solid ccc 2 給父元素...

垂直外邊距重疊問題

當兩個盒子 兄弟元素 處於垂直狀態時,相鄰兩個外邊距不是相加,而是取最大值 當兩個元素是父子關係時,子元素的外邊距 父元素的外邊距 會傳遞給對方 解決方法1 使用文字破壞外邊距相鄰 破壞相鄰狀態 缺點 需要增加html結構 解決方法2 使用border破壞外邊距相鄰 缺點 需要維持可見框大小 解決方...