fieldset的padding由浏览器ua样式硬编码，*{box-sizing:border-box}对其无效；必须同时显式重置fieldset和legend的padding/margin，并统一使用px单位以确保跨浏览器一致性。
fieldset 的 padding 是浏览器硬编码的，不是 CSS 继承来的
你写 * { box-sizing: border-box; } 对 fieldset 完全无效，不是你漏写了什么，而是 Chrome、Firefox、Safari 的 UA 样式表里直接写了类似 fieldset { padding: 0.35em 0.75em; } 这样的高优先级规则。它不走继承链，也不响应通配符重置——哪怕你把 html 和 body 都设成 border-box，fieldset 的内边距依然照常计算。
legend 会“上浮”进 fieldset 的顶部 padding 区域
legend 不是普通子元素：它的定位逻辑独立于父 fieldset 的盒模型，天生会侵入上边距区域。这导致两个问题：
- 视觉上
legend看似“贴顶”，实际是压进了fieldset的 padding 里，不同浏览器对这个“压入量”的实现不一致 - 即使你清空了
fieldset的 padding，若没同时重置legend { margin: 0; }，Safari 下它仍会上移、Chrome 下可能被截断
IE8–11 和第三方 UI 库会让问题更隐蔽
旧 IE 对 fieldset 的 padding 支持极弱，且会把 border: none 当作占位符挤压内容；而像 Ant Design 或 Bootstrap 这类库，有的已悄悄重置过 fieldset，你再加一遍 padding: 0 反而破坏布局。
- 排查时务必打开 DevTools，看 computed 样式里
padding的来源是 UA、自定义 CSS 还是第三方样式 - 兼容 IE8 必须全用
px单位，禁用em和百分比；同时避免和box-sizing混用（IE8 会直接忽略整条声明）
真正有效的重置必须同时作用于两个元素
只清 fieldset 或只清 legend 都不行，缺一不可：
-
fieldset { padding: 0; margin: 0; }—— 彻底清空，再按需加回（推荐padding: 8px 12px;） -
legend { margin: 0; padding: 0; }—— 否则它默认的margin-top会让居中失效 - 需要文字居中？别依赖默认行为，显式写
legend { text-align: center; }或用 flex 包裹
单位选择不是风格问题，是能否跨浏览器稳定的关键：用 em 就意味着字体缩放时 padding 会漂移，而 px 才能锁定视觉尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
