内边距

概览

使用内边距工具类来控制元素内部的空间。内边距工具类是基于一个默认的 Sass map构建的，范围从 0 到 3rem（.p-0 到 .p-12）。使用像 .p-3 和 .p-5 这样的工具类来控制元素四周的内边距：

          <div class="p-3">.p-3</div>
<div class="p-5">.p-5</div>
        

符号

适用于所有断点的内边距工具类，从xs到2xl，没有断点前缀。这是因为这些类从min-width: 0及以上应用，因此不受媒体查询限制。然而，其余的断点确实包含断点前缀。

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

其中 property 是：

• p - 用于设置 padding 的类

其中 sides 为以下之一：

• t - 用于设置 padding-block-start 的类
• b - 用于设置 padding-block-end 的类
• s - （开始）用于设置 padding-inline-start 的类
• e - （结束）用于设置 padding-inline-end 的类
• x - 用于设置 padding-inline 的类
• y - 用于设置 padding-block 的类
• blank - 用于在元素的四个边设置 padding 的类

其中 size 为以下之一：

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

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

示例

单面

使用像 .pt-4、.pe-4、.pb-4 和 .ps-4 这样的工具来控制元素一侧的内边距：

          <div class="pt-4">.pt-4</div>
<div class="pe-4">.pe-4</div>
<div class="pb-4">.pb-4</div>
<div class="ps-4">.ps-4</div>
        

水平内边距

使用像 .px-3 和 .px-5 这样的工具来控制元素的水平内边距：

          <div class="px-3">.px-3</div>
<div class="px-5">.px-5</div>
        

垂直内边距

使用像 .py-3 和 .py-5 这样的工具来控制元素的垂直内边距：

          <div class="py-3">.py-3</div>
<div class="py-5">.py-5</div>
        

响应式

所有的内边距工具都是响应式的，并包含所有断点。

• .p-0 到 .p-12
• .sm:p-0 到 .sm:p-12
• .md:p-0 到 .md:p-12
• .lg:p-0 到 .lg:p-12
• .xl:p-0 到 .xl:p-12
• .2xl:p-0 到 .2xl:p-12

CSS

Sass 工具 API

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

"padding": (
  responsive: true,
  property: padding,
  class: p,
  values: $spacers
),
"padding-x": (
  responsive: true,
  property: padding-inline,
  class: px,
  values: $spacers
),
"padding-y": (
  responsive: true,
  property: padding-block,
  class: py,
  values: $spacers
),
"padding-top": (
  responsive: true,
  property: padding-block-start,
  class: pt,
  values: $spacers
),
"padding-end": (
  responsive: true,
  property: padding-inline-end,
  class: pe,
  values: $spacers
),
"padding-bottom": (
  responsive: true,
  property: padding-block-end,
  class: pb,
  values: $spacers
),
"padding-start": (
  responsive: true,
  property: padding-inline-start,
  class: ps,
  values: $spacers
),