首先,我們先來看一下什麼是外邊距合併。
外邊距合併(疊加)是乙個相當簡單的概念。但是,在實踐中對網頁進行布局時,它會造成許多混淆。
簡單地說,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
當乙個元素出現在另乙個元素上面時,第乙個元素的下外邊距與第二個元素的上外邊距會發生合併。
但在垂直方向上又分為兩種情況,父子級和兄弟級。接下來,我們分別來討論這兩種情況。
解決方案:父子之間:給父級增加overflow:hidden
兄弟之間:外面套個父元素,增加overflow:hidden
外邊距的垂直方向上的合併現象
補充乙個屬性知識點 overflow屬性 如果元素中的內容超出了給定的寬度和高度屬性,overflow 屬性可以確定是否顯示滾動條等行為.分割線 在此之前我們都學習了margin屬性,這是乙個外邊距屬性。水平方向上的外邊距是可以疊加的。這是怎麼個意思呢?例如 我是span 我是span 我是div ...
css中外邊距的合併問題
1.父子級 給父元素新增邊框屬性 給父元素 子元素新增浮動屬性 給父元素 子元素新增定位屬性 給父元素設定overflow hidden屬性 有滾動條的不要用 給父元素設定display inline block 子級沒用 給本應該設定給子元素的外邊距設定給父元素的內邊距 父元素的內邊距變大了,盒子...
垂直外邊距合併問題
簡單地說,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。實際工作中,垂直外邊距合併問題常見於第乙個子元素的margin top會頂開父元素與父元素相鄰元素的間距,而且只在標準瀏覽器下 firffox chrome ope...