bootstrap 5 的 m-1 至 m-5 默认像素值分别为 4px、8px、16px、24px、48px（基于根字体大小 16px），数值由 rem 单位动态计算，随 html font-size 变化而变化。
Bootstrap 5 的 m-1 到 m-5 默认像素值是多少
默认值取决于根字体大小（html 元素的 font-size），Bootstrap 5 使用 rem 单位，基准为 16px。因此所有 m- 类的像素值是动态计算的，不是固定写死的。
在未修改 $spacers 的标准 Bootstrap 5.3+ 中，$spacers 默认为：
$spacers: ( 0: 0, 1: .25rem, // → 4px（16 × 0.25） 2: .5rem, // → 8px 3: 1rem, // → 16px 4: 1.5rem, // → 24px 5: 3rem // → 48px );
-
m-0→margin: 0 -
m-1→margin: 4px -
m-2→margin: 8px -
m-3→margin: 16px -
m-4→margin: 24px -
m-5→margin: 48px
注意：m-3 不等于 3px，这是最常被误解的一点——数字只是键名，不直接对应像素。
为什么不能直接查“m-3 是多少像素”就完事
因为像素值会随根字号变化。如果项目里把 html { font-size: 20px; }，那 m-3 就变成 20px（1rem = 20px），m-4 变成 30px。
更关键的是：响应式类如 mt-md-3、mx-lg-2 全部复用同一套 $spacers，改一个就全变；而这些类本身不带媒体查询逻辑，它们的断点行为由 Bootstrap 的 Sass 编译时生成规则控制。
- 改了
$spacers后，所有m-/p-及其方向/断点变体自动更新 - 手动用
!important覆盖某个.m-3 { margin: 12px !important }会导致md:m-3等类失效或不一致 -
rem值在缩放、高对比度模式、系统字体设置下仍可访问，px会锁死
如何快速验证当前页面中 m-3 实际生效的像素值
打开浏览器开发者工具，选中一个带 m-3 的元素，在 Styles 面板里找 margin 属性，右侧会显示计算后的像素值（例如 16px），同时能看到原始声明来自 bootstrap.min.css:1234 或你自定义的 Sass 输出。
- 检查 computed 标签页里的
margin-top等具体方向值，比看 shorthand 更准 - 若用了 CSS 自定义属性（如
--bs-spacer），说明你用的是 Bootstrap 5.3.3+ 的新机制，但该变量仅用于部分组件，m-/p-工具类仍走$spacers - 用
getComputedStyle(el).marginTop在控制台运行，返回字符串如"16px"，可编程验证
改间距但不想动整个 $spacers 怎么办
真有局部调整需求时，推荐用语义化 class 替代工具类，比如：
<div class="card mb-card-lg"></div>
然后在自定义样式中写：
.mb-card-lg { margin-bottom: 1.75rem; }
- 避免污染全局工具类体系
- 保留
m-3的原意（“中等间距”），新类名表达业务含义（“卡片底部大间距”） - 后续维护时，搜
mb-card-lg就知道用途，而m-4可能被到处滥用 - 如果必须扩展工具类，应通过 Sass 的
map-merge($spacers, (...))添加新键（如6: 6rem），而非覆盖原 map
真正难的不是算出像素值，而是决定哪些间距该统一、哪些该解耦——这直接影响组件复用性和设计系统演进成本。
