資訊專欄INFORMATION COLUMN
摘要：外邊距折疊第一種兩個塊級元素的上下邊距折疊第二種父元素和子元素或者最后一個元素的外邊距第三種空的塊級元素的上下外邊距折疊的根本原因之間直接接觸，沒有阻隔折疊后外邊距的計算如果兩個外邊距都是正值，折疊后的外邊距取較大的一個如果兩個外邊距一正一
CSS外邊距折疊
第一種：兩個塊級元素的上下邊距折疊
第二種：父元素和子元素（或者最后一個元素）的外邊距
第三種：空的塊級元素的上下外邊距
折疊的根本原因：
margin之間直接接觸，沒有阻隔
折疊后外邊距的計算：
1.如果兩個外邊距都是正值，折疊后的外邊距取較大的一個
2.如果兩個外邊距一正一負，折疊后的邊距為邊距之和
3.如果兩個外邊距都為負數(shù)，折疊后邊距為較小的邊距
解決方案：解決方法實際上也就是阻止外邊距直接接觸
第一種、第三種：只有靜態(tài)流的元素才會發(fā)生外邊距合并故設(shè)置float position inline-block都可以
第二種（嵌套的情況）只要border padding非0或者有inline元素隔開，比如在父元素里加一行文字也可以
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117422.html
摘要：譯文理解中的塊級格式化上下文塊級格式化上下文是網(wǎng)頁視覺渲染的一部分，并用于決定塊盒子的布局。根據(jù)所言浮動絕對定位元素為或行內(nèi)塊元素表格單元格表格標(biāo)題以及屬性值不為的元素除了該值被傳播到視點的情況將創(chuàng)建一個新的塊級格式化上下文。 CSS > 譯文：理解CSS中的塊級格式化上下文 Original Author: Ritesh Kumar Original Article: http:/...
摘要：當(dāng)兩個及以上外邊距折疊，合并后的外邊距寬度是發(fā)生折疊的外邊距中的最大寬度。如果該元素的外邊距同其父元素的上外邊距折疊，則該盒的上邊框邊緣同其父元盒的上邊框邊緣相同。 2017-07-20: 關(guān)于外邊距折疊, 推薦問題: https://segmentfault.com/q/10... 8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box...
摘要：外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。 外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。 合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。 首先看下W3C對于外邊距合并的介紹： 外邊距合并...
摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。 外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現(xiàn)，分為3種情況，非常具有實用價值，需要的朋友可以參考下 前文 這是的一個經(jīng)典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。 從一個簡單例子說起 先看一個簡單示例： `` `.sli...
摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。 外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現(xiàn)，分為3種情況，非常具有實用價值，需要的朋友可以參考下 前文 這是的一個經(jīng)典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。 從一個簡單例子說起 先看一個簡單示例： `` `.sli...
閱讀 1479·2023-04-26 00:08
閱讀 818·2021-11-23 18:51
閱讀 1690·2021-11-12 10:34
閱讀 1023·2021-10-14 09:43
閱讀 511·2021-08-18 10:23
閱讀 2594·2019-08-30 15:55
閱讀 3402·2019-08-30 11:05
閱讀 2800·2019-08-29 12:50
