在 Web 开发中，我们经常需要在元素周围添加空间来优化布局。Bootstrap 的间距（Spacing）系统为我们提供了一套预定义的 margin（外边距）和 padding（内边距）工具类，让我们能够轻松、快速地控制布局，提升页面的视觉效果。
在使用这些工具类之前，让我们先来看看用于添加间距的各种类别的语法规则：
- 针对超小屏：
- (属性)(边)-(尺寸)
- 针对其他断点：
- (属性)(边)-(断点)-(尺寸)
属性
我们可以通过两种主要方式为元素添加间距，这取决于我们是想在元素外部还是内部创建空间。
描述
—
定义外边距，在元素边界外创建空间。
定义内边距，在元素内容周围创建空间。### 边
这个属性允许我们将间距精确地应用到元素的特定一侧。
- t : 应用于 margin-top 或 padding-top（顶部）。
- b : 应用于 margin-bottom 或 padding-bottom（底部）。
- l : 应用于 margin-left 或 padding-left（左侧）。
- r : 应用于 margin-right 或 padding-right（右侧）。
- x : 同时应用于水平和水平轴（即左右两侧）。
- y : 同时应用于垂直和垂直轴（即上下两侧）。
- 空白 : 应用于元素的所有四个边。
尺寸
Bootstrap 提供了一组预定义的尺寸值，让我们可以快速添加固定大小的间距。
- 0 – 0px 间距（移除间距）。
- 1 – 4px 间距。
- 2 – 8px 间距。
- 3 – 16px 间距（默认间距单位）。
- 4 – 24px 间距。
- 5 – 48px 间距。
- auto – 自动外边距（通常用于水平居中）。
断点
断点是网站内容根据设备尺寸进行调整的关键点，它们允许我们为不同屏幕大小的用户展示最佳布局。
- 系统中常用的断点包括：sm, md, lg, 和 xl。
语法示例
让我们来看看如何在不同断点下应用这些类：
- 针对超小屏 – xs (默认):
- 针对中等屏 – md:
- 针对大屏 – lg:
- 针对超大屏 – xl:
响应式间距表
下表展示了如何控制间距在不同屏幕尺寸下的显示行为：
屏幕尺寸
类名示例
—
—
在所有尺寸显示
.ml-3
仅在 xs 显示
.ml-3 .ml-sm-0
仅在 sm 显示
.ml-sm-3 .ml-md-0
仅在 md 显示
.ml-md-3 .ml-lg-0
仅在 lg 显示
.ml-lg-3 .d-xl-0
仅在 xl 显示
.ml-xl-3### 案例 1：基础内边距与外边距
在这个示例中，我们将展示如何将内边距和外边距工具类应用到元素上。通过这些类，我们在内容周围创建了空间，从而改进了布局和视觉呈现。
HTML
CODEBLOCK_285f1a2a
输出结果：
!Spacing-in-BootstrapBootstrap 间距示例输出
案例 2：响应式外边距
这个示例演示了如何使用外边距工具类来添加间距。第二个标题特别展示了响应式外边距类的用法：它会在 xs、sm 和 md 尺寸的屏幕上显示左侧外边距，但在大屏幕上则会移除。
HTML
CODEBLOCK_83870745
输出结果：
!Spacing-in-Bootstrap-2响应式间距示例输出
案例 3：容器间距应用
在这个示例中，我们演示了一个 Bootstrap 容器…