在 CSS 中以新方式設定間距樣式

Sam Davis Omekara
Sam Davis Omekara
LinkedIn
Patrick Brosset
Patrick Brosset
首頁

發布日期：2025 年 6 月 11 日

告別邊框和虛擬元素的破解技巧，歡迎使用 CSS 間距裝飾。

Microsoft Edge 團隊很高興宣布，CSS 間距修飾功能現已開放開發人員在 Chrome 和 Edge 139 中試用，這項功能可用於設定 flex、格線和多欄版面配置中項目間的間距樣式。

歡迎試用並提供意見，協助我們持續強化這個 API。

問題

在日曆、資訊卡或資料資料格等 UI 元件中設定間距樣式，可大幅提升可讀性，並增添整體美感。不過，在格狀和 Flexbox 版面配置中實現這種效果，傳統上需要使用邊框、偽元素或背景技巧的笨拙解決方法。這些因應措施可能會因多種原因而發生問題。

  • 不直覺：這類元素會引入視覺樣式結構依附元件，違反語意式 HTML 的設計原則。
  • 不利於無障礙：這類元素通常需要額外的 DOM 元素，可能會干擾螢幕閱讀器等輔助技術。
  • 難以維護：這類元件需要複雜的版面配置邏輯，且不利於在元件之間維持一致的樣式。
  • 影響效能：這些因應措施可能會在 DOM 中新增不必要的元素，進而導致效能問題。

雖然網頁平台已支援使用 column-rule 屬性設定間距，但目前僅限於多欄版面配置。網路開發人員一直要求在其他相關版面配置類型 (例如格線和彈性容器) 中，以一致的方式設定間距樣式。

解決方案：CSS 間距裝飾

間距修飾元素可擴充 column-rule 屬性，以便與其他版面配置類型 (例如格線和彈性容器) 搭配運作，並引入新的 row-rule 屬性來補足。這可讓不同版面配置類型中的間距樣式保持一致，並提供新的自訂選項。

CSS 間隙裝飾具有下列優點：

  • 不會影響版面配置：裝飾純粹是視覺效果，這些元素不會影響版面配置或間距，因此您可以放心採用，不必擔心會破壞現有設計。
  • 重複語法：與 CSS 格線相似，您可以使用 repeat() 語法在容器的不同部分建立裝飾圖案，以最少的 CSS 實現豐富一致的設計。
  • 更簡潔的標記：不需要額外的元素或擬似元素，只需直接設定間距樣式即可。
  • 可自訂性：除了傳統的寬度、樣式和顏色規則樣式外，*rule-break、*rule-outset 和 gap-rule-paint-order 等新 CSS 屬性還提供更多自訂選項。

有了 CSS 間距修飾，您就能輕鬆建立視覺上獨特且可維護的頁面版面配置。

實際操作的間距裝飾

如要使用 CSS 間距裝飾功能，請使用支援這項功能的瀏覽器：Edge 或 Chrome 139 以上版本，並前往 edge://flags 或 chrome://flags 切換「Enable Experimental Web Platform Features」標記。

互動式開發人員遊樂場

如要嘗試支援 CSS 間距修飾的不同版面配置類型，並使用所有新屬性，請試試我們的互動式開發人員遊樂場。

遊樂場。

漢堡選單

可用於自訂漢堡圖片的 UI，其中各個部分之間會加入線條。

漢堡選單示範會顯示如何使用 column-rule-break: intersection 屬性，在每個可見交叉處加上行間距裝飾，以便顯示行間距。

這個示範也使用 column-rule-offset: -15px 調整裝飾的長度，將裝飾拉離每個交叉點的邊緣。

筆記本

看起來像是筆記本的空白頁。

在Notebook 示範中，row-rule-break: none 可確保資料列裝飾不會在交叉處中斷，而是會從容器的左側持續執行至右側。另一方面，column-rule-break: spanning-item 可確保系統不會在跨越項目的後方繪製欄位裝飾，而是在跨越項目的起點和終點繪製，形成可見的 T 型交叉。

row-rule 屬性會使用 repeat() 函式，精確控管如何在版面配置的不同區段中套用間距裝飾。這可啟用樣式模式，在標題和頁尾隱藏資料列規則，並在主要內容周圍使用較粗的樣式，其他地方則使用較細的樣式。

每日 CSS 新聞

雜誌風格版面配置。

Daily CSS News 示範採用雜誌風格版面配置，並在多個格線和 Flexbox 容器中定義 CSS 間距裝飾。

請注意右側的數獨遊戲，它使用 9x9 格狀區塊和重複圖案，在行與列之間繪製細線和粗線：

.sudoku {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 6px;
  column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  column-rule-style: solid;
  column-rule-color: var(--secondary);
  row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  row-rule-style: solid;
  row-rule-color: var(--secondary);
}

要求提供意見回饋

很高興您能嘗試 CSS 間距裝飾。我們認為這項功能可解決常見問題，也非常歡迎您提供意見，讓我們能根據您的需求調整這項功能。

CSS 間隙裝飾功能仍在 Chromium 中實作中。如果您決定進行測試，請注意，我們仍在積極進行相關作業，因此您可能會遇到無法正常運作的情況。目前的部分限制包括動畫間距裝飾和使用大量格線軌道。

如果您發現錯誤，或對這項功能有任何想法，請開啟新的 Chromium 錯誤，分享您的意見回饋。