「CSS」Margin Collapsing - 外邊距合并

cheukyin 發布于2019-08-28 18:17 / 1579人閱讀

摘要：外邊距合并都是基于以下三種基本的外邊距合并。空元素它自己的上外邊距和下外邊距合并了。阻止外邊距合并第二種情況不合并設置不為都可。

外邊距合并在排版上帶來非常大的便利，但是人們對其不甚了解，導致使用外邊距的時候總是出現繁多問題，今日寫下一片文章，總結一下外邊距合并。

三種基本的外邊距合并

只有上外邊距和下外邊距才會觸發外邊距合并，左外邊距和右外邊距不會。外邊距合并都是基于以下三種基本的外邊距合并。

1. 相鄰的同胞元素

我們考慮兩個連續的 div，他們的上下左右的邊距都是 50px。此時，第一個區域的下外邊距 和 第二個區域的上外邊距 合并，故他們的間隔是 50px。

2. 父元素與子元素

第一個子元素的上外邊距和父元素的上外邊距會進行合并

最后一個子元素的下外邊距和父元素的下外邊距會進行合并

合并的視覺效果就是這些合并的外邊距 表現為父元素的外邊距。

我們使用一個有顏色區域包含另外一個不同顏色的區域。里面的區域所有的外邊距設為50px。

我們可以看到， margin-box 的左邊和右邊都展示為 #cccdd1, 而由于上邊和下邊的外邊距和父元素的合并了，并表示為父元素的外邊距，故顏色為父元素的父元素的背景色（若又發生合并，遞推即可）。

細心的讀者會發現，我并沒有設置父元素的 margin，何來合并一說？
這是因為當 margin 為 0 的時候也會發生合并。

3. 空元素

它自己的上外邊距和下外邊距合并了。°(°ˊДˋ°) °

阻止外邊距合并 第二種情況不合并

設置 overflow: hidden;（不為 visible 都可）。

由于 margin 需要直接接觸才能夠合并，根據盒子模型，我們可以設置父元素的邊框或 內邊距，或者使用某些元素將第一個元素和父元素隔開（那就不是第一個元素了）。

三種情況都不合并

只有在靜態流的元素才會發生外邊距合并，故設置 float, position: absolute; 都可以使得外邊距在何種情況都不合并。

inline-block 是個例外，它既沒有脫離文檔流，但是它的所有的外邊距都不會合并。

DEMO

聽說技術文章和 DEMO 更配噢～
git clone https://github.com/JasonKid/fezone.git 搜索 Margin Collapsing

記得點贊... (╯‵□′)╯︵ ┴─┴

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111147.html

詳解css外邊距折疊（margin collapsing）

摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現，分為3種情況，非常具有實用價值，需要的朋友可以參考下前文這是的一個經典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。從一個簡單例子說起先看一個簡單示例： `` `.sli...

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

摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現，分為3種情況，非常具有實用價值，需要的朋友可以參考下前文這是的一個經典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。從一個簡單例子說起先看一個簡單示例： `` `.sli...

J4ck_Chan 2019-06-28 16:52 評論0 收藏0
詳解css外邊距折疊（margin collapsing）

摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現，分為3種情況，非常具有實用價值，需要的朋友可以參考下前文這是的一個經典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。從一個簡單例子說起先看一個簡單示例： `` `.sli...

levy9527 2019-08-29 17:28 評論0 收藏0
css外邊距折疊（margin collapsing）

摘要：前文這是的一個經典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。前文這是的一個經典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。從一個簡單例子說起先看一個簡單示例： .slide1 p { margin:10px 0; } 第1種外邊距折...

xinhaip 2019-08-29 17:08 評論0 收藏0