input[type="radio"]在父容器中错位是因为其作为替换元素，按vertical-align: baseline对齐时受line-height影响而下沉；应设vertical-align: middle并确保同级文字容器也设相同值，或改用inline-flex+align-items: center隔离影响。
input[type="radio"] 在父容器中错位，不是你 CSS 写错了，而是浏览器对表单控件的渲染机制和 line-height 的交互出了问题。
为什么父级 line-height 会让单选按钮下沉？
单选按钮是替换元素（replaced element），它有自己的固有尺寸和基线对齐逻辑。line-height 不控制它的高度，只影响其所在行框（line box）的垂直空间分配。当父容器设了较大的 line-height（比如 line-height: 2），而 input[type="radio"] 默认按 vertical-align: baseline 对齐时，它就会卡在文本基线上——但基线位置随行高变化浮动，视觉上就“掉下去”了。
- Firefox 尤其明显，它的表单控件基线计算和 Chrome 不一致
- 哪怕父容器只有单个单选按钮，也会因行框拉高而暴露对齐偏差
- 加
display: block能绕过，但会破坏行内布局需求
vertical-align 是最直接有效的修复点
不碰 line-height，只改对齐方式，就能让单选按钮稳定居中：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给
input[type="radio"]加vertical-align: middle（不是center，CSS 里没有这个值） - 如果父容器是
flex布局，优先用align-items: center，vertical-align会被忽略 - 避免用
vertical-align: top或bottom，它们依赖行框上下边界，仍可能随字体变化偏移 - 若同时存在文字和单选按钮，确保文字容器（如
label）也设相同vertical-align值，否则相对位置会跳
父容器设 line-height 时的兼容写法
如果你必须靠父级 line-height 控制整体行距（比如统一段落排版），就得隔离表单控件的影响：
- 把单选按钮和对应文字包在
label里，然后给label设display: inline-flex; align-items: center; - 不要给含表单控件的容器设
line-height，改用padding或margin控制外部间距 - 若父容器是
p或div且必须设line-height，则子级input必须显式重置：vertical-align: middle; margin-top: -2px;（微调补偿不同浏览器渲染差） - 禁用
font-size: 0+line-height组合——这会让单选按钮彻底失去对齐参考基准
真正麻烦的不是怎么调，而是调完发现 Chrome 看着正，Firefox 里又低 1px。这种细微偏移没法靠“全局重置”解决，得在含表单控件的局部上下文里单独处理 vertical-align 和容器 display 类型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
