CSS外邊距折疊引發(fā)的問(wèn)題

zollero 發(fā)布于2019-08-30 15:55 / 2668人閱讀

摘要：外邊距折疊第一種兩個(gè)塊級(jí)元素的上下邊距折疊第二種父元素和子元素或者最后一個(gè)元素的外邊距第三種空的塊級(jí)元素的上下外邊距折疊的根本原因之間直接接觸，沒(méi)有阻隔折疊后外邊距的計(jì)算如果兩個(gè)外邊距都是正值，折疊后的外邊距取較大的一個(gè)如果兩個(gè)外邊距一正一

CSS外邊距折疊

第一種：兩個(gè)塊級(jí)元素的上下邊距折疊
第二種：父元素和子元素（或者最后一個(gè)元素）的外邊距
第三種：空的塊級(jí)元素的上下外邊距
折疊的根本原因：
margin之間直接接觸，沒(méi)有阻隔
折疊后外邊距的計(jì)算：
1.如果兩個(gè)外邊距都是正值，折疊后的外邊距取較大的一個(gè)
2.如果兩個(gè)外邊距一正一負(fù)，折疊后的邊距為邊距之和
3.如果兩個(gè)外邊距都為負(fù)數(shù)，折疊后邊距為較小的邊距
解決方案：解決方法實(shí)際上也就是阻止外邊距直接接觸
第一種、第三種：只有靜態(tài)流的元素才會(huì)發(fā)生外邊距合并故設(shè)置float position inline-block都可以

第二種（嵌套的情況）只要border padding非0或者有inline元素隔開(kāi)，比如在父元素里加一行文字也可以

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

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

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

相關(guān)文章

CSS > 譯文：理解CSS中的塊級(jí)格式化上下文

摘要：譯文理解中的塊級(jí)格式化上下文塊級(jí)格式化上下文是網(wǎng)頁(yè)視覺(jué)渲染的一部分，并用于決定塊盒子的布局。根據(jù)所言浮動(dòng)絕對(duì)定位元素為或行內(nèi)塊元素表格單元格表格標(biāo)題以及屬性值不為的元素除了該值被傳播到視點(diǎn)的情況將創(chuàng)建一個(gè)新的塊級(jí)格式化上下文。 CSS > 譯文：理解CSS中的塊級(jí)格式化上下文 Original Author: Ritesh Kumar Original Article: http:/...

LancerComet 2019-08-28 18:13 評(píng)論0 收藏0
CSS規(guī)范 > 8 盒模型 Box Model

摘要：當(dāng)兩個(gè)及以上外邊距折疊，合并后的外邊距寬度是發(fā)生折疊的外邊距中的最大寬度。如果該元素的外邊距同其父元素的上外邊距折疊，則該盒的上邊框邊緣同其父元盒的上邊框邊緣相同。 2017-07-20: 關(guān)于外邊距折疊, 推薦問(wèn)題: https://segmentfault.com/q/10... 8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box...

suemi 2019-08-28 18:14 評(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外邊距折疊（margin collapsing）

摘要：這個(gè)例子就是外邊距折疊塊級(jí)元素的上外邊距和下外邊距有時(shí)會(huì)合并或折疊為一個(gè)外邊距。外邊距折疊指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距，本文詳細(xì)的介紹了一下css外邊距折疊的實(shí)現(xiàn)，分為3種情況，非常具有實(shí)用價(jià)值，需要的朋友可以參考下前文這是的一個(gè)經(jīng)典的老問(wèn)題，因?yàn)橹皠偤糜凶x者朋友問(wèn)到，順便整理一下。從一個(gè)簡(jiǎn)單例子說(shuō)起先看一個(gè)簡(jiǎn)單示例： `` `.sli...

孫吉亮 2019-08-23 13:52 評(píng)論0 收藏0
詳解css外邊距折疊（margin collapsing）

摘要：這個(gè)例子就是外邊距折疊塊級(jí)元素的上外邊距和下外邊距有時(shí)會(huì)合并或折疊為一個(gè)外邊距。外邊距折疊指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距，本文詳細(xì)的介紹了一下css外邊距折疊的實(shí)現(xiàn)，分為3種情況，非常具有實(shí)用價(jià)值，需要的朋友可以參考下前文這是的一個(gè)經(jīng)典的老問(wèn)題，因?yàn)橹皠偤糜凶x者朋友問(wèn)到，順便整理一下。從一個(gè)簡(jiǎn)單例子說(shuō)起先看一個(gè)簡(jiǎn)單示例： `` `.sli...

J4ck_Chan 2019-06-28 16:52 評(píng)論0 收藏0