外邊距合併

2021-10-09 03:07:39 字數 558 閱讀 1378

為了更方便地控制網頁中的元素,製作網頁時,可使用如下**清除元素的缺省內外邊距:

注意: 行內元素是只有左右外邊距的,是沒有上下外邊距的。 內邊距,在ie6等低版本瀏覽器也會有問題。

我們盡量不要給行內元素指定上下的內外邊距就好了。

使用margin定義塊元素的垂直外邊距時,可能會出現外邊距的合併。

當上下相鄰的兩個塊元素相遇時,如果上面的元素有下外邊距margin-bottom,下面的元素有上外邊距margin-top,則他們之間的垂直間距不是margin-bottom與margin-top之和,而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合併(也稱外邊距塌陷)。

解決方案: 避免就好了。

對於兩個巢狀關係的塊元素,如果父元素沒有上內邊距及邊框,則父元素的上外邊距會與子元素的上外邊距發生合併,合併後的外邊距為兩者中的較大者,即使父元素的上外邊距為0,也會發生合併。

解決方案:

可以為父元素定義1畫素的上邊框或上內邊距。

可以為父元素新增overflow:hidden。

外邊距合併(外邊距塌陷)

使用margin定義塊元素的垂直外邊距時,可能會出現外邊距的合併。當上下相鄰的兩個塊元素相遇時,如果上面的元素有下外邊距margin bottom,下面的元素有上外邊距margin top,則他們之間的垂直間距不是margin bottom與margin top之和,而是兩者中的較大者。這種現象被稱...

外邊距塌陷 外邊距合併

1.父子塊級 元素外邊距塌陷 子元素加margin top,父元素也加margin top,如果父元素沒有設定margin top,那預設0,取的是其中最大 的值,這個效果作用父元素身上啦 原因 他倆共用乙個外邊距 解決 方法一 給父元素加 border padding 方法二 給父元素加overf...

外邊距合併

從3個簡單的小例子來看外邊距合併 給h1加50px的margin,但實際上h1和div的margin合併在一起了 detail設定margin為30px,header設定margin為30px,結果兩個相鄰元素之間的間距發生了合併 而且合併寬度是margin數值大的為準。如下圖detail和head...