legend不能直接用margin推位置，因浏览器将其视为“嵌在边框上的图例”，非普通块元素；设margin-top或padding-left会使其脱离原生锚点，导致压边、错位及跨浏览器不一致。
legend为什么不能直接用margin推位置
因为浏览器把legend当“嵌在边框上的图例”，不是普通块元素。直接设margin-top或padding-left，它会脱离原生锚点，导致文字压边、错位，甚至在 Safari/Firefox 中表现不一致。
常见错误现象：标题文字一半被边框盖住、左对齐后右边空一大截、居中后边框顶部断开。
- 必须先给
fieldset加position: relative，否则legend设position: absolute会相对整个页面定位 -
legend设position: absolute时，top建议从-0.5em起步微调，值取决于字体大小和行高 - 一定要加
width: max-content（或fit-content），否则legend默认撑满父容器，换行异常、文字挤在一起 - 补
background: #fff盖住下方边框线，不然标题区域会透出边框
怎么安全地左对齐又不破坏语义锚点
想让标题左对齐、带缩进、还贴着上边框顶部，别碰padding-left——那会把legend推离它本该“挂”着的边框锚点位置。
正确做法是只动margin，保留原生定位逻辑：
立即学习“前端免费学习笔记（深入）”；
legend { margin-left: 1rem; margin-top: 0; margin-bottom: 0.5rem; }- 如果要加背景色或圆角，
fieldset必须同步加overflow: hidden，否则legend会溢出圆角外 - 禁用
width: 100%——它会让文字撑满、换行异常；width: fit-content更可控 - 旧版 Safari 不认
display: inline-flex，对齐用display: inline-block+vertical-align: top更稳妥
fieldset边框重置后legend总跑偏怎么办
一旦你给fieldset设了border: none、padding: 0或display: flex，原生定位逻辑就失效了——legend可能卡在左上角、文字压边、甚至只显示一半。
最稳的起步写法：
-
fieldset { border: none; padding: 0.75rem; margin: 0; }（留出内容呼吸空间） -
legend必须设display: block，再用margin: 0 auto居中；text-align对它无效 - 别碰
legend { position: absolute }——除非你同时给fieldset加position: relative，且测试过 Chrome/Firefox/Safari 三端 - Firefox 对
max-width支持弱，换行靠white-space: normal显式声明
禁用fieldset时legend还显示吗
加disabled属性不影响渲染，fieldset和legend仍照常显示，只是内部控件变灰、不可交互、值不提交。但如果你用 CSS 把边框清掉了，用户就完全看不出“这组被禁用了”。
- 视觉提示必须手动补：
fieldset[disabled] { opacity: 0.7; }或fieldset[disabled] { box-shadow: inset 0 0 0 2px #ccc; } -
legend本身不能加disabled，加了也没效果；若需灰化标题文字，单独写fieldset[disabled] legend { color: #999; } - IE11 下
button在fieldset[disabled]里可能仍可点击，建议加pointer-events: none保底
真正难的不是第一次调好样式，而是每次动态渲染都守住 DOM 顺序和纯文本约束——它卡在语义链最前端，错一点，整组控件的可访问性就断了。
