什么是外邊距重疊切心,重疊的結(jié)果是什么飒筑?

1.什么是外邊距重疊?

? ? 外邊距重疊指的是绽昏,當(dāng)兩個(gè)垂直外邊距相遇時(shí),它們將形成一個(gè)外邊距俏脊。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的高度如果都是正邊界全谤,邊界寬度是相鄰邊界寬度中最大的值。如果出現(xiàn)負(fù)邊界爷贫,則在最大的正邊界中減去絕對(duì)值最大的負(fù)邊界认然。如果沒有正邊界补憾,則從零中減去絕對(duì)值最大的負(fù)邊界。只有外邊距才可以是負(fù)值卷员,內(nèi)邊距不允許為負(fù)值盈匾。

2.外邊距重疊的圖示:

? ? 當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí),第一個(gè)元素的底邊界與第二個(gè)元素的頂邊界發(fā)生合并毕骡。

? ?當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)(假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開)削饵,它們的頂和底邊界也發(fā)生合并:

? ? 假設(shè)有一個(gè)空元素,它有邊界未巫,但是沒有邊框或填充窿撬。在這種情況下,頂邊界與底邊界就碰到了一起叙凡,它們會(huì)發(fā)生疊加:

3.外邊距重疊的作用劈伴。

? ? 當(dāng)我們上下排列一系列規(guī)則的塊級(jí)元素時(shí),那么塊元素之間因?yàn)橥膺吘嘀丿B的存在握爷,段落之間就不會(huì)產(chǎn)生雙倍的距離跛璧,這樣各處距離就一致了。

4.外邊距不重疊的情況新啼。

? ? 水平margin永遠(yuǎn)不會(huì)重合

? ? 設(shè)置了overflow屬性(visible除外)的元素和它的子元素之間的margin不會(huì)重疊

? ? 設(shè)置了絕對(duì)定位(position:absolute)的盒模型赡模,垂直margin不會(huì)被重疊,和子元素之間也不重疊

? ? 設(shè)置了display:inline-block的元素师抄,垂直margin不會(huì)重疊漓柑,和子元素之間也不重疊

? ? 根元素(如html)與body的margin不會(huì)重疊

5.防止外邊距重疊的方法。

? ? 元素絕對(duì)定位postion:absolute;一般用在內(nèi)層元素

? ? 內(nèi)層元素 加float:left;或display:inline-block;

? ? 外層元素用padding增加邊距

? ? 外層元素設(shè)置overflow:hidden;

? ? 內(nèi)層元素透明邊框border:1px solid transparent;

6.參考文獻(xiàn)

CSS外邊距(margin)重疊及防止方法

CSS中margin邊界疊加問題及解決方案

CSS2速查表- BFC與邊距重疊詳解

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末叨吮,一起剝皮案震驚了整個(gè)濱河市辆布,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌茶鉴,老刑警劉巖锋玲,帶你破解...
    沈念sama閱讀 206,482評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異涵叮,居然都是意外死亡惭蹂,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門割粮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來盾碗,“玉大人,你說我怎么就攤上這事舀瓢⊥⒀牛” “怎么了?”我有些...
    開封第一講書人閱讀 152,762評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長航缀。 經(jīng)常有香客問我商架,道長,這世上最難降的妖魔是什么芥玉? 我笑而不...
    開封第一講書人閱讀 55,273評(píng)論 1 279
  • 正文 為了忘掉前任蛇摸,我火速辦了婚禮,結(jié)果婚禮上灿巧,老公的妹妹穿的比我還像新娘赶袄。我一直安慰自己,他們只是感情好砸烦,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,289評(píng)論 5 373
  • 文/花漫 我一把揭開白布弃鸦。 她就那樣靜靜地躺著,像睡著了一般幢痘。 火紅的嫁衣襯著肌膚如雪唬格。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,046評(píng)論 1 285
  • 那天颜说,我揣著相機(jī)與錄音购岗,去河邊找鬼。 笑死门粪,一個(gè)胖子當(dāng)著我的面吹牛喊积,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播玄妈,決...
    沈念sama閱讀 38,351評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼乾吻,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了拟蜻?” 一聲冷哼從身側(cè)響起绎签,我...
    開封第一講書人閱讀 36,988評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎酝锅,沒想到半個(gè)月后诡必,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,476評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡搔扁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,948評(píng)論 2 324
  • 正文 我和宋清朗相戀三年爸舒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片稿蹲。...
    茶點(diǎn)故事閱讀 38,064評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡扭勉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出场绿,到底是詐尸還是另有隱情剖效,我是刑警寧澤嫉入,帶...
    沈念sama閱讀 33,712評(píng)論 4 323
  • 正文 年R本政府宣布焰盗,位于F島的核電站璧尸,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏熬拒。R本人自食惡果不足惜爷光,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,261評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望澎粟。 院中可真熱鬧蛀序,春花似錦、人聲如沸活烙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽啸盏。三九已至重贺,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間回懦,已是汗流浹背气笙。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評(píng)論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留怯晕,地道東北人潜圃。 一個(gè)月前我還...
    沈念sama閱讀 45,511評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像舟茶,于是被迫代替她去往敵國和親谭期。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,802評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案吧凉? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評(píng)論 1 92
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表隧出,主要用...
    寥寥十一閱讀 1,808評(píng)論 0 6
  • 1.什么是外邊距重疊 外邊距重疊是指兩個(gè)或多個(gè)盒子(可能相鄰也可能嵌套)的相鄰邊界重合在一起而形成一個(gè)單一邊界,外...
    楓塵逍遙閱讀 1,630評(píng)論 0 0
  • ?前端面試題匯總 一鸳劳、HTML和CSS 21 你做的頁面在哪些流覽器測(cè)試過?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,219評(píng)論 0 8
  • 內(nèi)心里有個(gè)妒忌的小孩 無形中已經(jīng)影響到生活 輕聲對(duì)它說:“關(guān)注自己也搓,放過自己赏廓!”
    福丫閱讀 286評(píng)論 1 2