English 中文 العربية 日本語 Português

Bootstrap: 间距

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

Alice 在上一课写了个人主页，但发现卡片之间太挤、标题离文字太近——传统方式要给每个元素写 margin-bottom: 1.5rem。

(4) 解法

Bootstrap 的间距工具类让这一切变得简单。它提供了一套基于 rem 的间距工具类，覆盖 margin 和 padding 的所有方向组合，让你不需要写一行 CSS 就能精确控制元素间距。Bootstrap 只需一个 mb-4。

理解方式： Bootstrap 的间距系统就像一个"步进尺"——每个数字代表一个固定刻度值（从 0.25rem 到 3rem），你只需要选数字，不用记像素值。

(5) 收益

使用 Bootstrap 间距工具类后，Alice 只需 mb-4、p-3 这样的 class 就能精确控制元素间距，告别手写 CSS 的繁琐，页面布局更加整洁高效。

2. 间距刻度

间距刻度从 0 到 5，每个数字对应一个 rem 值：

刻度 rem px（16px 基准） 类比
0 0 0px 无间距
1 0.25 4px 极小间距
2 0.5 8px 紧凑间距
3 1 16px 标准间距
4 1.5 24px 大间距
5 3 48px 极大间距

此外还有 auto（自动）。

3. 属性与方向

class 命名规则：{p|m}{t|b|s|e|x|y|空白}{0|1|2|3|4|5|auto}

TEXT 📖 仅展示 
  m         t          3
  ^         ^          ^
  属性   方向（可选）    数值
部分 选项 含义
属性 m margin（外边距）
p padding（内边距）
方向 t top（上）
b bottom（下）
s start（左，逻辑属性）
e end（右，逻辑属性）
x left + right（水平）
y top + bottom（垂直）
空白 四个方向

注意： Bootstrap 5 使用逻辑属性 s（start）和 e（end）替代了 l（left）和 r（right），以更好地支持 RTL（从右到左）语言。中文和英语场景下 s = 左，e = 右。

▶ 示例：间距刻度演示

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spacing Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .box { background: #e9ecef; border: 1px solid #0d6efd; }
    .highlight { background: #0d6efd; color: #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">

    <!-- Margin bottom -->
    <div class="box">
      <div class="highlight mb-0">mb-0</div>
      <div class="highlight mb-1">mb-1 (4px)</div>
      <div class="highlight mb-2">mb-2 (8px)</div>
      <div class="highlight mb-3">mb-3 (16px)</div>
      <div class="highlight mb-4">mb-4 (24px)</div>
      <div class="highlight mb-5">mb-5 (48px)</div>
    </div>

    <hr>

    <!-- Padding all sides -->
    <div class="box p-0"><span>p-0</span></div>
    <div class="box p-3 mt-2"><span>p-3 (16px on all sides)</span></div>
    <div class="box p-5 mt-2"><span>p-5 (48px on all sides)</span></div>

  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

4. 常用间距组合

实际开发中最常用的间距模式：

HTML 
<!-- Card list: spacing between cards -->
<div class="card mb-3">Card 1</div>
<div class="card mb-3">Card 2</div>
<div class="card mb-3">Card 3</div>

<!-- Section: vertical padding -->
<section class="py-5">Section with 48px top & bottom padding</section>

<!-- Button: margin around -->
<button class="btn btn-primary me-2">Save</button>
<button class="btn btn-secondary">Cancel</button>

<!-- Container: horizontal padding -->
<div class="px-4">Content with comfortable side padding</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

模式 常见写法 作用
卡片间距 mb-3 卡片之间留 16px 间隙
区块间距 py-5 区块上下各 48px 留白
按钮间距 me-2 按钮组之间留 8px
容器内边距 px-4 左右各 24px 安全边距

5. 水平居中：mx-auto

当元素有固定宽度时，mx-auto 实现水平居中：

▶ 示例：水平居中

HTML 
<div style="width: 200px;" class="mx-auto bg-primary text-white text-center p-3">
  Centered block with mx-auto
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 mx-auto 等价于 CSS 的 margin-left: auto; margin-right: auto;，适用于所有块级元素。

6. 响应式间距

间距工具类支持所有断点后缀，让不同屏幕尺寸拥有不同的间距：

HTML 
<div class="p-3 p-md-5 bg-light">
  Resize the browser to see padding change at 768px breakpoint.
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

写法 手机 (xs) 平板 (md+)
p-3 p-md-5 16px 48px
mb-2 mb-lg-0 8px margin-bottom 0 margin-bottom
pt-4 pt-xl-5 24px padding-top 48px padding-top

7. gap 间距

Flexbox 和 Grid 布局中，gap 工具类控制子元素之间的间距：

HTML 
<div class="d-flex gap-3">
  <div class="bg-primary text-white p-3">Item 1</div>
  <div class="bg-primary text-white p-3">Item 2</div>
  <div class="bg-primary text-white p-3">Item 3</div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

gap class 值 说明
gap-0 0 无间距
gap-1 0.25rem 极小
gap-2 0.5rem 紧凑
gap-3 1rem 标准
gap-4 1.5rem 宽松
gap-5 3rem 很大

8. 间距 vs 容器内边距

100% 
graph TD
    A[Container padding: 0 12px] --> B[Row margin: 0 -12px]
    B --> C[Col 1 padding: 0 12px]
    B --> D[Col 2 padding: 0 12px]
    B --> E[Col 3 padding: 0 12px]

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

层级 间距控制方式 说明
容器 内置 padding 内容不贴边
行 负 margin 抵消容器的 padding
列 内置 padding 列之间的间隙（gutter）
内部 p-* / m-* 内容元素的精确间距

(2) 间距刻度完整参考

刻度 rem px (16px 基准) 名称 适用场景
0 0 0px 无间距 移除默认边距
1 0.25 4px 极小 图标与文字间隙
2 0.5 8px 紧凑 按钮组间距
3 1 16px 标准 卡片间距、段落间距
4 1.5 24px 大 区块间距
5 3 48px 极大 页面分区间距
auto auto auto 自动 水平居中

(3) 响应式间距断点

写法 手机 (<576px) 平板 (>=768px) 桌面 (>=992px) 大屏 (>=1200px)
p-3 p-md-4 p-lg-5 16px 24px 48px 48px
m-2 m-md-3 m-xl-4 8px 16px 16px 24px
px-2 px-lg-4 8px (左右) 8px (左右) 24px (左右) 24px (左右)
py-3 py-md-5 16px (上下) 48px (上下) 48px (上下) 48px (上下)
gap-2 gap-lg-4 8px 8px 24px 24px

▶ 示例：响应式间距页面

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-section { background: #f8f9fa; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="container">
    <!-- Hero: responsive padding -->
    <div class="bg-primary text-white text-center px-3 py-5 px-md-5 py-md-6 rounded">
      <h1 class="display-5">响应式间距演示</h1>
      <p class="mb-0">缩放宽口观察间距变化</p>
    </div>

    <!-- Cards: responsive gap -->
    <div class="row g-2 g-md-3 g-lg-4 mt-4">
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>卡片一</h5>
          <p class="mb-0 small">手机端 p-3，桌面端 p-4</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>卡片二</h5>
          <p class="mb-0 small">gap 随断点递增</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>卡片三</h5>
          <p class="mb-0 small">g-2 → g-3 → g-4</p>
        </div>
      </div>
    </div>

    <!-- Info bar -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center bg-light p-3 p-md-4 mt-4 rounded">
      <span class="mb-2 mb-md-0">flex-column 变成 flex-md-row</span>
      <button class="btn btn-primary">点击</button>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：卡片布局间距

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">博客文章列表</h3>

    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">文章标题一</h5>
        <p class="card-text text-muted small mb-2">2026 年 1 月 15 日</p>
        <p class="card-text">这是一篇示范文章，展示卡片之间的 mb-3 间距。</p>
        <a href="#" class="btn btn-sm btn-primary">阅读更多</a>
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">文章标题二</h5>
        <p class="card-text text-muted small mb-2">2026 年 1 月 14 日</p>
        <p class="card-text">每张卡片底部都有 16px 间距，列表清晰可读。</p>
        <a href="#" class="btn btn-sm btn-outline-primary">阅读更多</a>
      </div>
    </div>

    <div class="card mb-4 p-4 bg-light border-0">
      <div class="row g-3">
        <div class="col-6">
          <div class="p-3 bg-primary text-white rounded text-center">py-3 内部</div>
        </div>
        <div class="col-6">
          <div class="p-3 bg-success text-white rounded text-center">g-3 沟槽</div>
        </div>
      </div>
    </div>

    <div class="d-flex gap-2 justify-content-end">
      <button class="btn btn-secondary">上一页</button>
      <button class="btn btn-primary">下一页</button>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：表单间距

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-lg-6">
        <h3 class="mb-4">用户注册</h3>

        <form>
          <div class="mb-3">
            <label for="name" class="form-label">姓名</label>
            <input type="text" class="form-control" id="name" placeholder="请输入姓名">
          </div>

          <div class="mb-3">
            <label for="email" class="form-label">邮箱</label>
            <input type="email" class="form-control" id="email" placeholder="name@example.com">
          </div>

          <div class="mb-3">
            <label for="pwd" class="form-label">密码</label>
            <input type="password" class="form-control" id="pwd">
            <div class="form-text text-muted mt-1">密码长度至少 8 位</div>
          </div>

          <div class="mb-4 form-check">
            <input type="checkbox" class="form-check-input" id="agree">
            <label class="form-check-label" for="agree">同意服务条款</label>
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">注册</button>
            <button type="reset" class="btn btn-outline-secondary">重置</button>
          </div>
        </form>

        <p class="text-muted small mt-4 mb-0">提示：所有输入框间距使用 mb-3 统一控制</p>
      </div>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

❓ 常见问题

Q 一个元素可以用多个间距 class 吗？先后顺序影响结果吗？
A 可以、不影响。class="mt-3 mb-4 p-2" 同时设置上边距 16px、下边距 24px、四周内边距 8px。CSS 层叠中后定义的 class 如果值不同会覆盖先定义的，但 Bootstrap 的间距 class 互不冲突所以顺序无关。
Q p-5 是 48px，我觉得太大了怎么办？
A 有三种选择：(1) 用 p-4（24px）或 p-3（16px）；(2) 自定义 CSS 变量 --bs-gutter-x 调整网格间距；(3) Phase 5 讲解 Sass 定制时可修改 $spacer 变量重新定义整个刻度体系。
Q mx-auto 为什么只对块级元素生效？
A margin: auto 在 CSS 规范中要求元素必须有明确的宽度（非 auto 即可），且元素是块级（display: block）。行内元素没有宽度概念，所以 mx-auto 不生效。
Q Bootstrap 支持负 margin 吗？
A 支持有限的负 margin。Bootstrap 提供 m{n|s|e|t|b|x|y}-n{1|2|3|4|5} 类，如 mt-n3 表示负的 1rem 上边距。负 margin 常用于抵消容器 padding 或实现重叠效果。注意负值不适用于 padding 和 gap，且响应式后缀（如 mt-md-n3）也支持。
Q 间距 class 在嵌套元素中如何工作？
A 间距 class 只作用于当前元素，不继承。子元素不会自动继承父元素的 p-* 或 m-*。嵌套场景中常见做法是：父容器设 p-* 控制内边距，子元素设 mb-* 控制间距。响应式 breakpoint 后缀也支持嵌套——class="px-3 px-md-5" 在不同屏幕尺寸下表现一致。

📖 小节

📝 作业

  1. ⭐ 使用间距 class 构建一个三卡片布局：卡片之间 gap-3，卡片内部 p-4，外部容器 py-5，在第一张卡片上额外添加 mt-3 观察效果。
  2. ⭐⭐ 用响应式间距做一个区块：手机端 px-3 py-4，桌面端 px-5 py-5。
  3. ⭐⭐⭐ 创建一个居中按钮组（mx-auto + d-flex + gap-2），包含三个按钮，按钮之间有 8px 间距。

上一课： 排版 · 下一课： Flexbox

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏