空间

示例

与需要使用 flexbox 或 grid 的 间距工具 不同，间距工具类可以通过对子元素应用外边距来在任何父元素上起作用。

<div class="d-flex space-x-3 p-3 bd-pattern-diagonal rounded-3">
  <div class="p-3 bg-subtle-accent fg-accent rounded-3">Item 1</div>
  <div class="p-3 bg-subtle-accent fg-accent rounded-3">Item 2</div>
  <div class="p-3 bg-subtle-accent fg-accent rounded-3">Item 3</div>
</div>

为间距工具类生成的选择器被包装在:where()中以实现零特异性，从而使它们可以通过其他工具类或自定义 CSS 容易地被覆盖。

符号

适用于所有断点的间距工具，从 xs 到 2xl，它们中没有断点缩写。这是因为这些类从 min-width: 0 开始应用，因此不受媒体查询的限制。然而，其余的断点确实包含断点缩写。

这些类使用以下格式命名：{property}-{size}表示xs，{breakpoint}:{property}-{size}表示sm、md、lg、xl和2xl。

其中 property 为以下之一：

• space-x - 用于通过 margin-inline-end 设置水平间距的类
• space-y - 用于通过 margin-block-end 设置垂直间距的类

其中 size 为以下之一：

• 0 - 对于通过设置来消除间距的类 0
• 1 -（默认情况下）用于将间距设置为的类 $spacer * .25
• 2 -（默认情况下）用于将间距设置为的类 $spacer * .375
• 3 -（默认情况下）用于设置间距的类 $spacer * .5
• 4 -（默认情况下）用于将间距设置为的类 $spacer * .75
• 5 -（默认情况下）用于设置间距的类 $spacer * 1
• 6 -（默认情况下）用于设置间距的类 $spacer * 1.25
• 7 -（默认情况下）用于将间距设置为的类 $spacer * 1.5
• 8 -（默认情况下）用于设置间距的类 $spacer * 1.75
• 9 -（默认情况下）用于设置间距的类 $spacer * 2
• 10 -（默认情况下）用于设置间距的类 $spacer * 2.25
• 11 -（默认情况下）用于设置间距的类 $spacer * 2.5
• 12 -（默认情况下）用于设置间距的类 $spacer * 3

（你可以通过向 $spacers Sass map变量添加条目来增加更多尺寸。）

水平

使用 space-x-* 工具类来控制子元素之间的水平间距：

          <div class="d-flex space-x-3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
        

垂直

使用 space-y-* 工具类来控制子元素之间的垂直间距：

          <div class="space-y-3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
        

它是如何工作的

太空效用适用 margin-inline-end 或 margin-block-end 通过选择器选择除最后一个之外的每一个直接子元素 :where(.space-x-3 > :not(:last-child)). 这个 :where() 包装器将特异性保持为零，因此你可以轻松地使用标准边距工具覆盖单个子元素。

          :where(.space-x-3 > :not(:last-child)) {
  margin-inline-end: .5rem;
}
        

CSS

Sass 工具 API

空间工具类在我们的工具类 API scss/_utilities.scss 中声明。了解如何使用工具类 API。

"space-x": (
  responsive: true,
  property: margin-inline-end,
  class: space-x,
  child-selector: "> :not(:last-child)",
  values: $spacers
),
"space-y": (
  responsive: true,
  property: margin-block-end,
  class: space-y,
  child-selector: "> :not(:last-child)",
  values: $spacers
),