真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

怎么在css中折疊外邊距

怎么在css中折疊外邊距？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

10年積累的做網(wǎng)站、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有秭歸免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

先看一個(gè)簡(jiǎn)單示例：


 
    第1種外邊距折疊：兄弟元素
    文本上下間距10px
    文本上下間距10px

怎么在css中折疊外邊距

看這個(gè)例子中的兩個(gè)p標(biāo)簽，根據(jù)樣式定義：第一個(gè)p的margin-bottom和第二個(gè)p的margin-top 都是10px，那實(shí)際距離應(yīng)該等于20px才對(duì)，但是用瀏覽器查看一下可以發(fā)現(xiàn)，最終的邊距是10px。這個(gè)例子就是外邊距折疊：塊級(jí)元素的上外邊距和下外邊距有時(shí)會(huì)合并（或折疊）為一個(gè)外邊距。

分類情況

外邊距折疊有3種基本情況：

相鄰元素
父元素和第一個(gè)子元素（或者最后一個(gè)子元素，等下記得回頭思考下這里為啥是第一個(gè)或者最后一個(gè)）
空的塊級(jí)元素

先不急著記憶，首先，前文的例子中就是第一種情況--相鄰的兩個(gè)元素之間發(fā)生的外邊距折疊。

第二種和第三種情況如下：

怎么在css中折疊外邊距


  第2種外邊距折疊：父元素和首個(gè)子元素

第3種外邊距折疊：空的塊級(jí)元素

他們的圖像也分別如圖：

情況2：子元素的外邊距會(huì)“轉(zhuǎn)移”到父元素的外面

情況3：該元素的上下外邊距會(huì)折疊

好了，到這里我們不妨來(lái)看看這幾種情況的共同點(diǎn)（建議畫(huà)一下他們的盒模型，我懶就不畫(huà)了-_-）,可以發(fā)現(xiàn)發(fā)生外邊距折疊的共同原因：margin之間直接接觸，沒(méi)有阻隔。

如何理解直接接觸？很簡(jiǎn)單：

第一個(gè)例子中，兩個(gè)
標(biāo)簽的垂直方向margin是直接接觸的；
第二個(gè)例子中，由于父元素的padding,border都為0，所以margin和它的子元素也是直接接觸的。（這個(gè)例子畫(huà)出盒模型就很好理解）
第三個(gè)例子中，空元素本身的上下邊距也是直接接觸的（padding,border也是0）

各種情況下折疊的結(jié)果

折疊后的邊距如何計(jì)算，這個(gè)可以簡(jiǎn)單驗(yàn)證下：