CSS margin-trim 怎麼用？用 fallback 處理容器邊界的子元素間距

margin-trim 解決什麼問題#

margin-trim 作用在容器，控制容器是否裁切子元素在 block 或 inline 邊界的外距。最常用的值是：

• block：裁切 block-start 與 block-end 的子元素 margin。
• block-start、block-end：只裁切其中一側。
• inline、inline-start、inline-end：處理 inline 軸的對應邊界。
• none：不裁切，這是預設行為。

它裁切的是「子元素的 margin」，不是容器自己的 margin，也不是把所有後代元素的外距任意歸零。先把這個差異弄清楚，才不會用 margin-trim 修錯層級。

最安全的 fallback 寫法#

先寫在所有瀏覽器都能理解的 CSS：

1
.stack {
2
  padding-block: 1rem;
3
}
4

5
.stack > * {
6
  margin-block: 1rem;
7
}
8

9
.stack > :first-child {
10
  margin-block-start: 0;
11
}
12

13
.stack > :last-child {
14
  margin-block-end: 0;
15
}

這個結構把間距放在直接子元素上，只移除最外側的兩個 margin。padding-block 則提供容器自己的上下留白，避免內容貼住背景或邊框。若設計不需要容器 padding，可以移除它，但不要因此把所有子元素的 margin 都設成零。

用 @supports 加上 margin-trim#

支援 margin-trim: block 的瀏覽器可以讓容器自己表達邊界規則：

1
.stack {
2
  padding-block: 1rem;
3
}
4

5
.stack > * {
6
  margin-block: 1rem;
7
}
8

9
.stack > :first-child {
10
  margin-block-start: 0;
11
}
12

13
.stack > :last-child {
14
  margin-block-end: 0;
15
}
16

17
@supports (margin-trim: block) {
18
  .stack {
19
    margin-trim: block;
20
  }
21

22
  .stack > :first-child,
23
  .stack > :last-child {
24
    margin-block: 1rem;
25
  }
26
}

fallback 的第一個／最後一個 selector 仍然存在；@supports 只在新語法可用時把兩個子元素恢復成完整 margin，再交給容器裁切。這樣即使瀏覽器完全不認得 margin-trim，視覺結果仍接近預期。

如果只想裁切一側，可以改用更窄的值：

1
.card-list {
2
  margin-trim: block-end;
3
}

這適合「列表最後一張卡片不應把下方間距帶出容器」的情況。請先用實際 layout 確認 margin collapse、padding、border 與背景色的關係；不要把 margin-trim 當成通用的 margin reset。

什麼情況不該使用它#

1
@supports (margin-trim: block) {
2
  /* 仍要在實際瀏覽器測試 block 邊界與內容高度 */
3
}

用檢查表導入到元件#

把 margin-trim 放進共用元件前，依序確認：

1. 目前問題是第一個／最後一個子元素外距，還是 margin collapse、padding 或 gap 問題？
2. 容器的 layout 是一般 block／multicolumn，還是 flex／grid？
3. fallback 在不支援的瀏覽器中是否仍有正確的上下留白？
4. @supports 分支是否只改變邊界，不會重設中間元素的間距？
5. 長內容、空容器、巢狀 .stack、RTL 和不同 writing mode 是否測過？
6. component snapshot 或視覺回歸測試是否包含「只有一個子元素」的情況？

若你的目標只是讓同一列表的項目保持固定距離，gap 通常更直接；若內容是文章段落或第三方 markup，fallback selector 加上 @supports 才比較容易逐步導入。

常見問題#