margin外邊距合併和塌陷問題

2022-09-16 23:18:20 字數 425 閱讀 6067

1.外邊距合併問題

垂直排列的兩個塊級顯示模式的元素,為上面的元素設定下外邊距,為下面的元素設定上外邊距,外邊距會產生合併,當兩個值相等時則外邊距就是那個值,當兩個值不相等時則外邊距就是值大的那個值。(兩個塊級顯示模式的元素設定為浮動後再對第乙個元素設定右浮動,對第二個元素設定左浮動,不會產生合併問題)

2.外邊距塌陷問題

巢狀的兩個塊級顯示模式的元素,為內層的第乙個子元素設定上外邊距時,父元素會跟著子元素一起向下移動,即為外邊距塌陷問題。解決方案:1.為父元素設定上邊框。2.在父元素中設定overflow:hidden。3.在父元素中設定padding代替給子元素設定margin。(外邊距塌陷問題不會在水平方向發生,且是兩個鑲嵌的塊級顯示模式的元素,如果內層的元素設定了浮動再設定上外邊距也不會產生塌陷問題,父元素設定了浮動子元素沒有設定浮動,給子元素新增上外邊距也不會造成塌陷問題)

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

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

外邊距塌陷 外邊距合併

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

margin外邊距合併

之前遇到了乙個問題 title 無標題文件 styletype text css body div body div 這是外邊距合併造成的問題。外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。body和div的上外邊距合併了...