更新時間:2020-12-23 來源:黑馬程序員 瀏覽量:
當上下相鄰的兩個塊元素相遇時,如果上面的標簽有下外邊距margin-bottom,下面的標簽有上外邊距margin-top,則它們之間的垂直間距不是margin-bottom與margin-top之和,而是兩者中的較大者。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并(也稱外邊距塌陷)。
示例代碼如下:
<style type="text/css"> .one{ width:150px; height:150px; background:#FC0; margin-bottom:20px; /*定義第一個div的下外邊距為20px*/ } .two{ width:150px; height:150px; background:#63F; margin-top:40px; /*定義第二個div的上外邊距為40px*/ } </style>
運行示例代碼效果如圖1所示。
圖1 相鄰塊元素垂直外邊距的合并
圖1中,兩個<div>之間的垂直間距并不是第一個<div>的margin-bottom與第二個<div>的margin-top之和60px。如果用測量工具測量可以發(fā)現(xiàn),兩者之間的垂直間距是40px,即為margin-bottom與margin-top中的較大者。
猜你喜歡:
盒子模型的邊框樣式屬性和應用技巧講解
彈性盒子布局詳解[web前端培訓]
什么是css盒子,在網頁中起到什么作用?
黑馬程序員web前端培訓課程