<p>m- 和 p- 是 Bootstrap 基于 rem 的间距工具类，非像素值；m-3 对应 margin-top: 1rem，p-4 对应 padding: 1.5rem，数值映射自 $spacers 变量，需注意 RTL、响应式写法及 !important 隐患。</p>
什么是 m-* 和 p-*？别再当成“像素数字”用
它们不是 margin-top: 4px 这种固定像素值，而是基于 rem 的缩放系统：m-3 实际是 margin-top: 1rem（约 16px），p-4 是 padding: 1.5rem。这个 rem 值来自 Bootstrap 的 Sass 变量 $spacers，默认从 0 到 5 对应 0、0.25rem、0.5rem、1rem、1.5rem、3rem。
常见错误是看到 mt-2 就以为是 “2px 上边距”，结果在高 DPI 屏幕或自定义主题里完全对不上；更隐蔽的是改过 $spacers 后没重编译 CSS，导致页面所有 m-/p- 类突然“变小”或“错位”。
-
m-0→margin: 0 !important；my-0→margin-top: 0; margin-bottom: 0 - 方向后缀必须紧挨数值：
mr-2合法，mr2完全无效 -
m-auto仅对块级元素生效；mx-auto是水平居中，但不会影响垂直位置
怎么选方向后缀？s/e 比 l/r 更关键
Bootstrap 5 默认启用 RTL（从右向左）支持，pl-3 在阿拉伯语页面里会被自动转成 pr-3——但这是靠 CSS 逻辑属性（inset-inline-start）实现的，前提是你用了 ps-3（start 方向），而不是硬写 padding-left: 1rem。
如果你手动写了 padding-left: 0，它在 RTL 下不会翻转，结果就是左边空出一大块、右边被挤到边缘——这种 bug 很难定位，因为 HTML 看不出问题，只在 dir="rtl" 下爆发。
- 始终优先用
ps-（start）、pe-（end），不用pl-/pr- -
px-和py-依然安全：x = inline 方向（LTR/RTL 下都是左右），y = block 方向（始终上下） - 检查
<html dir="rtl">是否存在且生效，否则 Bootstrap 的 RTL 规则压根不触发
响应式间距怎么写？断点前缀不是“加一层保险”
md:p-4 的意思是“仅在 ≥768px 时应用 padding: 1.5rem”，小屏下它**完全不生效**，不是“继承上一个类”或“回退到默认值”。很多人误以为加个 md: 就能“兼顾大小屏”，结果小屏下内容贴边、大屏下又太松。
正确做法是“移动优先”：先写基础间距（如 p-3），再用断点覆盖（如 md:p-4）。如果只写 md:p-4，那手机上就等于没内边距。
- 断点前缀包括：
sm-（≥576px）、md-（≥768px）、lg-（≥992px）、xl-（≥1200px）、xxl-（≥1400px） - 不要混用多个断点类（如
sm:p-2 md:p-3 lg:p-4），除非真有逐级递进需求；多数场景只需一到两个断点 -
gap-*也支持响应式，比如gap-3控制 flex/grid 子项间距，row-gap-2单独控制行间距
什么时候该停手，别再堆 m-/p- 类？
单次、临时、和布局强相关的间距（比如“按钮下方留一个单位空隙”），用 mb-2 没问题；但一旦发现 pt-3 pb-4 px-2 在 5 个组件里重复出现，就该抽成语义类了，比如 form-field-group。
否则后期改设计——比如把标准间距从 1rem 改成 1.25rem——就得满项目搜替换，还无法利用 CSS 变量做主题切换；更麻烦的是，mb-5 对新人毫无业务含义，而 section-separator 一眼就知道干啥。
- 重复组合 ≥3 次 → 抽成自定义类，内部用
margin-bottom或padding - 需要 JS 动态增删间距 → 优先用 Utility 类，避免操作
element.style.margin - 容器本身要居中 → 别碰
.container的margin-left，该用p-x-3加内边距，而不是破坏margin: auto
最常被忽略的一点：所有 m-/p- 类都带 !important，所以一旦和其他 CSS 冲突，它大概率赢——这不是优势，是隐患。真要覆盖，得用更高优先级选择器，或者直接改变量重新编译。
