首頁技術(shù)文章正文

相鄰塊元素垂直合并是怎樣實(shí)現(xiàn)的?

更新時(shí)間:2020-12-23 來源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

  
當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí),如果上面的標(biāo)簽有下外邊距margin-bottom,下面的標(biāo)簽有上外邊距margin-top,則它們之間的垂直間距不是margin-bottom與margin-top之和,而是兩者中的較大者。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并(也稱外邊距塌陷)。

  示例代碼如下:

     <style type="text/css">
     .one{
         width:150px;
         height:150px;
         background:#FC0;    
         margin-bottom:20px;   /*定義第一個(gè)div的下外邊距為20px*/
         }
     .two{
         width:150px;
         height:150px;
         background:#63F;    
         margin-top:40px;      /*定義第二個(gè)div的上外邊距為40px*/
         }
     </style>

  運(yùn)行示例代碼效果如圖1所示。

1608694892986_1.gif

圖1 相鄰塊元素垂直外邊距的合并

  圖1中,兩個(gè)<div>之間的垂直間距并不是第一個(gè)<div>的margin-bottom與第二個(gè)<div>的margin-top之和60px。如果用測量工具測量可以發(fā)現(xiàn),兩者之間的垂直間距是40px,即為margin-bottom與margin-top中的較大者。 



猜你喜歡:
盒子模型的邊框樣式屬性和應(yīng)用技巧講解
彈性盒子布局詳解[web前端培訓(xùn)]
什么是css盒子,在網(wǎng)頁中起到什么作用?  
黑馬程序員web前端培訓(xùn)課程 

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!