在 CSS 中设置间距的新方法

Sam Davis Omekara
Sam Davis Omekara
LinkedIn
Patrick Brosset
Patrick Brosset
首页

发布时间：2025 年 6 月 11 日

告别边框和伪元素黑客攻击，欢迎使用 CSS 间距装饰。

Microsoft Edge 团队很高兴地宣布，CSS 间距装饰（一种用于设置弹性布局、网格布局和多列布局中项间间距的样式的新方法）现已在 Chrome 和 Edge 139 中推出，供开发者试用！

欢迎试用并提供反馈，帮助我们决定此 API 的未来发展方向。

问题

为日历、卡片或数据网格等界面组件设置间距样式可以大大提高可读性，并提升整体美感。不过，在网格布局和 Flexbox 布局中实现此效果，传统上需要使用边框、伪元素或背景技巧来实现笨拙的权宜解决方法。由于多种原因，这些权宜解决方法可能会出现问题。

  • 不直观：它们会为视觉样式引入结构依赖项，这违背了语义 HTML 的原则。
  • 不利于无障碍：它们通常需要额外的 DOM 元素，这可能会干扰辅助技术（例如屏幕阅读器）。
  • 难以维护：它们需要复杂的布局逻辑，并且会使跨组件实现一致的样式变得更加困难。
  • 对性能有害：这些权宜解决方法可能会向 DOM 添加不必要的元素，从而导致性能问题。

虽然 Web 平台已支持使用 column-rule 属性设置间距，但目前仅限于多列布局。Web 开发者一直希望能够以一致的方式为其他相关布局类型（例如网格和 Flexbox）设置间距样式。

解决方案：CSS 间隔装饰

间隔装饰扩展了 column-rule 属性，使其可与网格和 Flexbox 等其他布局类型搭配使用，并引入了新的 row-rule 属性来对其进行补充。这让不同布局类型的间距样式更加一致，并提供了新的自定义选项。

CSS 间隙装饰具有以下优势：

  • 对布局没有影响：装饰仅是视觉效果。它们不会影响布局或间距，因此您可以放心地采用它们，而不必担心破坏现有设计。
  • 重复语法：与 CSS Grid 类似，您可以使用 repeat() 语法在容器的不同部分创建装饰图案，从而只需使用少量 CSS 即可实现丰富且一致的设计。
  • 更简洁的标记：无需额外的元素或伪元素，只需直接设置间距样式即可。
  • 可自定义性：除了宽度、样式和颜色的传统规则样式之外，*rule-break、*rule-outset 和 gap-rule-paint-order 等新 CSS 属性还提供了更多自定义选项。

借助 CSS 间距装饰，您可以比以往更轻松地创建视觉上独特且可维护的页面布局。

间隔装饰的实际运用

如需立即试用 CSS 间距装饰，请使用支持 CSS 间距装饰的浏览器：Edge 或 Chrome（从 139 版开始），然后前往 edge://flags 或 chrome://flags 切换启用实验性 Web 平台功能标志。

互动式开发者 Playground

如需试用支持 CSS 间距装饰的不同类型的布局以及所有新属性，请试用我们的互动式开发者 Playground。

游乐场。

汉堡式菜单

用于自定义汉堡菜单的界面，其中各部分之间有线条。

汉堡菜单演示展示了如何使用 column-rule-break: intersection 属性在与行间距的每个可见交叉点处打破列间距装饰。

该演示还使用 column-rule-offset: -15px 调整装饰的长度，将其从每个交叉路口的边缘拉开。

笔记本

此演示看起来像是方格笔记本的页面。

在记事本演示中，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 中实现中。如果您要进行测试，请注意，我们仍在积极改进该功能，您可能会遇到该功能无法按预期运行的情况。目前存在的一些限制包括为间隔装饰设置动画和使用大量网格轨道。

如果您发现 bug 或对该功能有任何想法，请创建新的 Chromium bug 来分享您的反馈。