m-1 默认是4px，因其对应.25rem，而默认根字体大小为16px，故.25×16=4px；实际像素值随html font-size动态变化。
m-1 默认是多少像素（px）？
Bootstrap 5 的 m-1 默认是 4px，前提是根元素（）的字体大小为默认的 16px。
因为 m-1 映射的是 $spacers: (1: .25rem)，而 1rem = 16px → .25rem = 4px。这个换算不是固定死的，它随 html 的 font-size 动态变化；若你用媒体查询或 JS 修改了根字号，m-1 对应的像素值也会变。
-
m-1→margin: .25rem→ 通常为4px -
m-2→.5rem→ 通常为8px -
m-3→1rem→ 通常为16px -
m-4→1.5rem→ 通常为24px -
m-5→3rem→ 通常为48px
为什么不能直接查“m-1 = 多少px”？
因为 Bootstrap 5 全面采用 rem 单位，m-1 的 CSS 声明始终是 margin: .25rem，不写死像素值。它的实际像素表现取决于当前 html 元素的 font-size。
常见干扰场景：
- 使用了自定义根字号（如
html { font-size: 10px; }→m-1变成2.5px） - 启用了系统缩放或浏览器字体设置（影响
1rem计算） - 在
<iframe></iframe>或 Shadow DOM 中，根字号可能被隔离
如何快速验证当前页面中 m-1 的真实像素值？
打开浏览器开发者工具，选中一个带 m-1 的元素，在 Styles 面板里找 margin 属性，右侧会明确显示计算后的像素值（例如 margin: 4px），旁边还标注了来源：比如 bootstrap.min.css:123 或你自定义的 Sass 编译结果。
也可以在控制台运行：
getComputedStyle(document.querySelector('.m-1')).margin
返回值是字符串，如 "4px"（注意：该值是最终计算结果，已脱离 rem）。
想改 m-1 的大小，别碰 CSS 类名覆盖
直接写 .m-1 { margin: 6px !important; } 是反模式：破坏响应式一致性、无法适配根字号变化、且和 mx-1、mt-1 等方向类不同步。
正确做法是重定义 Sass 变量：
- 在导入 Bootstrap 前，重写
$spacersmap - 保持 key 不变（
0到5），只改 value，例如：1: .375rem→ 对应6px（仍基于16px根字号） - 不要动
$theme-spacer—— 这是 Bootstrap 4 的旧变量，5 中已废弃
真正容易被忽略的点：改完必须重新编译 Sass，纯 CSS 引入的 bootstrap.min.css 文件里，m-1 的值已经固化，任何后续 CSS 覆盖都只是打补丁。
