4.1 间距工具类：响应式留白判决

4.1 间距工具类：响应式留白判决

间距工具只有两个词根：m（margin，外距）与 p（padding，内距），配 0 到 16 的刻度与 t/b/s/e/x/y 六个方向，再加可选断点前缀，组成 Bootstrap 里使用频率最高的一族。刻度是刻出来的固定值，不是任意数字——这正是它快的原因，也是它需要「判」的原因。

位置：工具类四案的第一案，也是第 2、3 章里反复出现的胶水的正式归档。掌握刻度表后，你在前两章见过的 mb-3、py-5、g-3、me-auto 全部自动入册。

刻度取证：一张表读出所有间距类

图 4-1 间距刻度尺与方向矩阵

刻度表有两个记忆锚点：3 档就是 16px，也是栅格默认沟槽 g-3 的档位，日常八成判决落在 2、3、4、5 四档；5 档直接翻倍到 48px，是区块级分隔的分水岭。表里没列全的 6、7、9、10 等档同样存在，但从 4 直接跳到 5 再跳到 8，设计意图就是逼你少用极端值。

裁决判例：五类高频留白

<!-- 判例一：区块节奏——页头大留白、卡组中留白、行内小留白 -->
<header class="py-5 mb-4 bg-primary text-white">区块头：上下 48px、与下方隔 24px</header>
<div class="row g-3 mb-5">卡组：行内沟槽 16px，与页脚隔 48px</div>
<footer class="pt-4 border-top">页脚：顶部 24px 分隔</footer>

<!-- 判例二：断点刻度——手机紧凑、桌面舒展 -->
<section class="py-3 py-lg-5">
  同一区块：手机上下 16px，992px 起扩到 48px
</section>
<!-- 解读：留白也该响应式——小屏寸土寸金，大屏用呼吸感撑气场 -->

<!-- 判例三：me-auto 的推挤——导航右对齐不用写死 -->
<ul class="d-flex list-unstyled mb-0">
  <li class="me-3">首页</li>
  <li class="me-3">专栏</li>
  <li class="me-auto">关于</li>
  <li>登录</li>
</ul>
<!-- 效果：me-auto 吃掉剩余空间，「登录」被推到最右端 -->

<!-- 判例四：负值校正——行塌陷与重叠构图 -->
<div class="row g-4">
  <div class="col-md-8">
    <div class="p-4 border rounded">正文块</div>
  </div>
  <div class="col-md-4">
    <div class="p-4 border rounded mt-md-n4">侧栏：md 起向上叠 24px，压住行间距制造层次</div>
  </div>
</div>

<!-- 判例五：逻辑方向的实惠——RTL 免重写 -->
<div class="d-flex gap-2">
  <span class="badge text-bg-secondary ms-2">起点侧留白</span>
</div>
<!-- 解读：从右到左文向下，ms-2 的留白自动换边；用 ms-2 代替 ml-2 是白送的国际化 -->
​

⚠️ 常见坑：margin 与 padding 判混是最常见的事故。判给「元素自己内部的空气」用 p（内容与边框的距离），判给「元素与邻居的领土协议」用 m。卡片内文贴边、列表项挤成一团，都是该判 p 却判了 m 的典型。

案例：评论区留白全程重判

背景：评论列表在手机上局促（每条评论上下只隔 4px），在桌面又松散（隔 48px），两头的观感都不对。

操作：逐条改判——列表容器 py-2 py-md-4；单条评论内，头像与正文间 gap-2 gap-md-3；正文与操作行（点赞、回复）间 mt-1 mt-md-2；评论之间分隔 mb-2 mb-lg-4。

结果：xs 区间每条评论占高约 96px，紧凑但不粘连；lg 区间行高充裕，扫读节奏明显放缓。

解读：留白判决的通则是「同位双刻度——小屏取低档、大屏取高档，两档之间通常差一到两级」。这个案例里四个位置全部按此重判，而不是只改一处：留白是系统，单点修改会被周围未改的值衬托得更怪。

变式：若设计要求手机上完全去掉评论间分隔、靠分割线承担，改判为 mb-0 border-top——用边框替代外距，属于下一节外观族的接案。

验算：把刻度换算成像素当场核对

刻度表背不熟没关系，会换算就行。间距类全部以 rem 计价，根字号（html 的 font-size）默认 16px，换算只需要乘一次：

/* 根字号 16px 时的对照（在开发工具 computed 面板里核对） */
/* p-2    → 0.5rem  → 8px：卡片内的小空气 */
/* mt-4   → 1.5rem  → 24px：区块之间的常规分隔 */
/* px-lg-5 → 3rem   → 48px：992px 起的宽屏内边距 */
/* 若换算对不上：先查 html 的 font-size 是否被项目改成 14px 或 18px，
   根字号一变全站间距等比缩放——这是 rem 刻度的设计意图，
   老年模式放大字号、间距跟着放大，版式比例不散架 */
​

换算熟了，排错就有固定追问。间距相关的悬案按三问走：第一问「该谁动」——留白落在元素与邻居之间判 m，落在元素边框之内判 p，判反了会出现「卡片内文贴边」或「列表挤成一团」；第二问「哪一档」——先用 2、3、4、5 四档试，落不进再考虑极端档，多数「间距不对」其实是档位跳太多；第三问「哪个区间」——写了 mt-md-4 却在手机上不生效，是忘了它 768px 以下根本不存在，补一条无前缀的默认判决即可。

还有一类集体悬案值得记档：全站间距突然整体变大或变小，八成不是某个类的问题，而是根字号被改——先验 html 的 font-size，再逐个查类，顺序反过来会白忙一场。

再记一个刻度外的常客：gap-* 与 m-* 在弹性容器里的分工。gap 管的是成员之间的距离，只作用于 flex、grid、多列布局内部，容器边缘不受影响；m 管的是元素对外的距离，哪儿都生效。给卡片组拉间距用 gap-3，成员间等距且首尾不冒头；若误用 m-3，每个成员四周都长边距，贴边的成员会跟容器边框打架，还得再补负 margin 找平——一步判对，省三步返工。

结案要点

• 刻度锚点：3 档 16px（g-3 同档）、5 档 48px，日常判决集中在 2/3/4/5；
• 方向用逻辑侧 s/e 白送 RTL 镜像；auto 管推挤、负值管叠压校正；
• 留白响应式通则「同位双刻度」，小屏低档、大屏高档；
• margin 是领土协议、padding 是室内空气，判错方向神仙难救。

下一节从空间转到颜色：语义色族的「一鱼多吃」。