外邊距合并

_Dreams 發布于2019-08-29 17:16 / 1905人閱讀

摘要：如下圖和外邊距合并之后，邊距為。自己和自己合并當元素內容為空時，元素設置的上下會自己和自己合并。二阻止外邊距合并的方法給父元素加如下圖給加上之后，和就沒有產生外邊距合并了。

一：外邊距合并的場景

從3個簡單的小例子來看外邊距合并：

1、父子合并

給h1加50px的margin，但實際上h1和div的margin合并在一起了

2、相鄰元素合并

detail設置margin為30px,header設置margin為30px，結果兩個相鄰元素之間的間距發生了合并

而且合并寬度是margin數值大的為準。如下圖detail和header外邊距合并之后，邊距為50px。

3、自己和自己合并

當元素內容為空時，元素設置的上下margin會自己和自己合并。如下面這個例子中，footer為空，設置了上下margin為30px，但實際上footer的間隔只是30px，自己的上下margin合并了。

二、阻止外邊距合并的方法 1、給父元素加border

如下圖給header加上border之后，h1和header就沒有產生外邊距合并了。

2、給父元素加上padding

注意：相鄰元素合并加padding和border都沒有用

3、形成一個BFC

給header加了一個overflow：hidden，形成一個BFC，外邊距就不再合并。
但是副作用時overflow：hidden是有作用，如果有二級菜單就會被隱藏。

當然其他形成BFC的方法也可以生效，但也有對應的副作用。
如用float：left，寬度會收縮。需要設置寬度為100%

demo

GPU云服務器云服務器外邊距重疊 html外邊距上下 html外邊距顏色 html 邊框外邊距

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114211.html

「CSS」Margin Collapsing - 外邊距合并

摘要：外邊距合并都是基于以下三種基本的外邊距合并?？赵厮约旱纳贤膺吘嗪拖峦膺吘嗪喜⒘?。阻止外邊距合并第二種情況不合并設置不為都可。外邊距合并在排版上帶來非常大的便利，但是人們對其不甚了解，導致使用外邊距的時候總是出現繁多問題，今日寫下一片文章，總結一下外邊距合并。三種基本的外邊距合并只有上外邊距和下外邊距才會觸發外邊距合并，左外邊距和右外邊距不會。外邊距合并都是基于以下三種基本的外...

cheukyin 2019-08-28 18:17 評論0 收藏0
CSS--外邊距合并的問題

摘要：外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。首先看下W3C對于外邊距合并的介紹：外邊距合并...

longshengwang 2019-08-29 12:39 評論0 收藏0
CSS之表格邊框合并、兄弟標簽外邊距合并、父子標簽的外邊距合并

摘要：本文內容表格邊框合并兄弟標簽外邊距合并父子標簽的外邊距合并首發日期表格邊框合并發生情況當設置了后，表格的相鄰邊框會合并，使得邊框變粗了。本文內容：表格邊框合并兄弟標簽外邊距合并父子標簽的外邊距合并 ? 首發日期：2018-05-01 ? 表格邊框合并： ? 發生情況：當設置了cellpadding=0 cellspacing=0后，表格的相鄰邊框會合并，使得邊框變粗了。 D...

_Dreams 2019-04-23 13:46 評論0 收藏0
CSS 盒模型

摘要：概覽盒模型也叫框模型，規定了元素框處理元素內容內邊距邊框和外邊距的方式。不幸的是，和在使用自己的非標準模型。當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。如果缺少右外邊距的值，則使用上外邊距的值。概覽 CSS 盒模型 (Box Model)也叫框模型，規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。 showImg(http...

heartFollower 2019-08-28 18:17 評論0 收藏0
挖掘margin屬性的內涵

摘要：合并問題塊級元素的上邊距和下邊距有時會合并或者折疊為一個外邊距捕獲到的重要信息只發生在塊級元素，但不包括浮動元素和絕對定位元素只發生在和當前文檔流方向的相垂直的方向上由于默認文檔流是水平流，因此發生合并的就是垂直方向會出現外邊距合并的三種基 1、margin合并問題塊級元素的上邊距和下邊距有時會合并或者折疊為一個外邊距捕獲到的重要信息只發生在塊級元素，但不包括浮動元素和絕對定位...

alanoddsoff 2019-08-29 15:29 評論0 收藏0
css 的margin學習筆記

摘要：的特性始終是透明的。例如就等于如果只有兩個值，第一個值表示上下值，第二個值為左右的值。垂直外邊距合并問題外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。 Margin的特性 margin始終是透明的。 margin通過使用單獨的屬性，可以對上、右、下、左的外邊距進行設置。即：margin-top、marg...

leiyi 2019-08-28 18:00 評論0 收藏0