fieldset 的 padding 由浏览器 ua 样式表定义，box-sizing 不影响其值；legend 是独立浮层，定位与 fieldset 盒模型无关；各浏览器对 fieldset padding 实现不一致，重置需谨慎并统一单位。
fieldset 的 padding 不是 box-sizing 能管的范围
因为它的默认 padding 来自浏览器 UA 样式表，比如 Chrome 写的是 fieldset { padding: 0.35em 0.75em; }，这条规则优先级远高于你写的 * { box-sizing: border-box; }。而 box-sizing 只影响 width/height 如何分配 content/padding/border 的空间，并不覆盖、重置或修改已声明的 padding 值本身。
legend 的定位逻辑完全独立于 fieldset 盒模型
legend 默认不是 fieldset 的普通子元素，它被浏览器当作“标题浮层”渲染在 fieldset 的上边距区域里。这意味着：
- 即使你清空了
fieldset的padding和margin，legend仍可能因自身margin或 UA 定位规则上移或错位 -
box-sizing对legend无意义——它不参与fieldset的尺寸计算流程 - 不重置
legend { margin: 0; padding: 0; }，Safari 下常见上浮、Chrome 下常被截断
各浏览器 UA 对 fieldset padding 的实现根本不一致
直接看默认值差异：
- Chrome / Firefox：
padding: 0.35em 0.75em - Safari ≤14：可能只应用
0.35em（仅上边距），或完全忽略右/下内边距 - IE8–11：对
em或%单位支持极差，甚至会因混用box-sizing直接丢弃整条 CSS 声明
这不是 bug，是各浏览器对 HTML 语义化表单容器的历史实现分歧——它们把 fieldset 当作特殊原生控件，而非普通块级元素对待。
第三方 UI 库常悄悄重置 fieldset，但方式不透明
像 Ant Design、Mantine 或某些 form 组件库，会在内部用类似 .ant-form-item fieldset 的选择器重置 padding，但不会暴露文档说明。后果是：
- 你写了全局
fieldset { padding: 0; }，反而破坏库的布局节奏 - DevTools 的 computed 样式里，
padding来源可能是 “user agent”、“author” 或 “framework”，必须逐层点开看 origin - 最稳妥的做法是避免通配符覆盖，改用作用域明确的选择器，比如
.my-contact-form fieldset
真正麻烦的从来不是写几行 CSS，而是 fieldset 和 legend 必须同时处理、单位必须统一用 px、且任何重置都得在引入第三方库前确认其行为——漏掉任意一环，视觉错位就藏在看似正常的页面里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
