chrome与firefox中margin/padding差异源于ua样式表对表单控件默认值不一致；应避免全局重置，改用rem/px显式声明、box-sizing: border-box、逻辑属性及预定义css变量，并注意伪元素display和浏览器兼容性。
margin/padding 在 Chrome 和 Firefox 里看起来不一样
不是你眼花，是 user-agent stylesheet 对表单控件、button、input 的默认 margin 和 padding 确实不一致。比如 button 在 Chrome 里有 0.25em 内边距，Firefox 却用 2px —— 数值不同，单位还混着来。
直接重置所有元素的 margin 和 padding（比如用 * { margin: 0; padding: 0; }）会破坏语义化组件的默认行为，尤其影响可访问性；更稳妥的做法是只干预你真正在意的组件范围。
- 对按钮、输入框等交互控件，统一用
rem或px显式声明margin/padding，避开em这类相对单位在不同 UA 下的计算差异 - 避免依赖浏览器默认的
line-height来“撑开”高度，它在 Safari 和旧 Edge 里波动明显；改用min-height+padding组合控制尺寸 - 检查是否启用了
box-sizing: border-box—— 没加这句的话，Chrome 和 Firefox 对width包含padding的解释可能不一致
CSS 变量没法在 :where() 或 :is() 里动态计算间距
CSS 变量本身没问题，但很多人误以为写成 --gap: 1rem; margin: calc(var(--gap) * 2); 就能自动适配所有浏览器。其实 calc() 在 Safari 15.4 之前不支持变量参与乘除运算，Firefox 90 以下对嵌套 calc(var(--x) + 1px) 的解析也容易出错。
真正安全的写法是把计算逻辑收口到变量定义侧，而不是在使用处反复 calc：
- 定义时就展开：用
--gap-xs: 4px; --gap-sm: 8px; --gap-md: 12px;，而不是只定义一个--gap-unit: 4px再到处calc - 需要响应式缩放？用媒体查询分别覆盖变量值，而不是靠 JS 注入或运行时计算
- 如果必须用
calc，确保所有目标浏览器都支持该语法 —— 查 caniuse.com/calc，别信“基本都支持”这种模糊判断
伪元素 ::before/::after 的 margin 不生效，其实是 display 问题
给 ::before 设了 margin-right: 8px 却没反应？大概率是因为它默认是 display: inline，而 inline 元素的 margin-top/margin-bottom 无效，margin-left/margin-right 虽然有效，但在某些浏览器（尤其是 Safari）里会和父容器的 font-size: 0 或 white-space: nowrap 冲突。
- 统一加上
display: inline-block或display: block，再设margin才可靠 - 如果伪元素是用来撑开间距的（比如图标+文字之间的空隙），优先考虑用
gap（配合display: flex）或padding-inline-start，比伪元素更可控 - 注意 Safari 对
::after在flex容器末尾的渲染顺序偶尔抽风，必要时加flex-shrink: 0锁定尺寸
autoprefixer 没补全 -webkit-margin-before 这类私有属性
autoprefixer 默认只处理标准属性的前缀（如 transform、flex），但它不碰 margin-block-start 或 -webkit-margin-before 这种老式逻辑属性 —— 因为这些根本没进标准，只是 WebKit 内部遗留。
如果你在调试中看到 Safari 表现异常，且控制台报出类似 Invalid property name: -webkit-margin-before 的警告，说明你手动写了已废弃的私有属性，而现代 CSS 已经用 margin-block 替代了它。
- 删掉所有
-webkit-margin-*、-moz-padding-*类似写法，改用margin-block/margin-inline，它们在 Safari 14.1+、Chrome 87+、Firefox 63+ 都稳定支持 - 若需兼容 IE11，不要用逻辑属性，退回
margin-top/margin-left+ 方向类名（如.u-mt-sm）更实在 - 检查构建流程里
postcss-preset-env是否启用，它比autoprefixer更擅长降级新语法（比如把gap编译成margin）
最常被忽略的是：CSS 变量作用域和继承链在不同浏览器里对伪元素、shadow DOM、iframe 的穿透规则并不完全一致。调样式时别只盯着主文档，记得打开 devtools 的「Computed」面板，挨个看子元素的真实计算值 —— 有时候问题不在你写的那行，而在上游某个没意识到的 inherit 覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
