外邊距合并

_Dreams 發(fā)布于2019-08-29 17:16 / 1987人閱讀

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

一：外邊距合并的場景

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

1、父子合并

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

2、相鄰元素合并

detail設(shè)置margin為30px,header設(shè)置margin為30px，結(jié)果兩個相鄰元素之間的間距發(fā)生了合并

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

3、自己和自己合并

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

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

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

2、給父元素加上padding

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

3、形成一個BFC

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

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

demo

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/114211.html

相關(guān)文章

「CSS」Margin Collapsing - 外邊距合并

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

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

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

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

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

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

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

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

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

alanoddsoff 2019-08-29 15:29 評論0 收藏0
css 的margin學(xué)習(xí)筆記

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

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