外邊距合并

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

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

一：外邊距合并的場(chǎng)景

從3個(gè)簡(jiǎn)單的小例子來(lái)看外邊距合并：

1、父子合并

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

2、相鄰元素合并

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

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

3、自己和自己合并

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

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

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

2、給父元素加上padding

注意：相鄰元素合并加padding和border都沒(méi)有用

3、形成一個(gè)BFC

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

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

demo

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114211.html

相關(guān)文章

「CSS」Margin Collapsing - 外邊距合并

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

cheukyin 2019-08-28 18:17 評(píng)論0 收藏0
CSS--外邊距合并的問(wèn)題

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

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

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

_Dreams 2019-04-23 13:46 評(píng)論0 收藏0
CSS 盒模型

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

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

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

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

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

leiyi 2019-08-28 18:00 評(píng)論0 收藏0