[CSS]Margin collapsing(邊界重疊)和Margin塌陷

#CSS #外邊距塌陷 #Margin collapsing #邊界重疊

[CSS] Margin collapsing和Margin塌陷- 前言

在 CSS 中,margin指的是元素之間的空間(外邊距)。在某些情況下,當兩個垂直相鄰的元素的外邊距相遇時,它們會合併成一個單一的外邊距。這種行為被稱為外邊距重疊(margin collapsing)。Margin塌陷則是子元素的Margin-top,bottom設定轉移到父元素的情況,以下簡單演示margin collapsing和Margin塌陷的情況與解決方法。

1. Margin 塌陷和Margin collapsing演示

1.1 Margin 塌陷

這邊演示Margin塌陷的兩種情況,第一種是當我們用一的大<div>包裹兩個小<div>元素時,在第一個子元素中設定”Margin-top”,這時候會發現Margin-top顯示出的效果像是在父元素在設定Margin-top。

Margin-top顯示出的效果像是在父元素在設定Margin-top

上述的情況同樣會發生在.inner2設定”Margin-bottom”,這邊我們先把父元素的高度設為”auto”,讓高度由子元素撐開,並添加一個outer2元素進行觀察,Margin-bottom的效果同樣作用在了父元素(outer)上

上述的情況同樣會發生在.inner2設定"Margin-bottom",這邊我們先把父元素的高度設為"auto",讓高度由子元素撐開,並添加一個outer2元素進行觀察,Margin-bottom的效果同樣作用在了父元素(outer)上

參考範例: https://alt41450.w3spaces.com/saved-from-Tryit-2023-12-12.html

1.2 Margin collapsing

Margin collapsing 主要發生在垂直方向的外邊距上。這種情況通常在以下三種情況下發生:

  1. 相鄰兄弟元素: 當兩個兄弟元素垂直排列時,他們的上下外邊距可能會重疊。
  2. 父子元素: 當父元素沒有上邊框、上內邊距、內容和清除浮動時,它的上邊距可能與其第一個子元素的上邊距重疊。
  3. 空的區塊元素: 當區塊元素沒有邊框、內邊距、內容、最小高度或浮動時,它的上下外邊距可能會重疊。

延續上面的例子,我將inner1設定了”margin-bottom:50px”,inner2設定了”margin-top:100px”,在實際顯示上會以大的為準,因此只保留了100px的設定,但這問題並不需要特別解決,實際設定上只要保持只設定margin-top或是margin-bottom就好了

2. Margin塌陷解決方式

解決方法可以在父元素設定”Padding”,”Border”等元素,但實務上不推薦使用,因為會影像到元素的整體寬高,最好的解法是採用”Overflow:hidden”可以看圖中的Margin都正確作用在子元素當中了

解決方法可以在父元素設定"Padding","Border"等元素,但實務上不推薦使用,因為會影像到元素的整體寬高,最好的解法是採用"Overflow:hidden"

3 更多教學

分享

發表迴響