根本原因是vertical-align基线不一致、box-sizing模式冲突及换行空白符干扰；应优先用display: flex; align-items: center;，或统一vertical-align: top/middle并清除空白、设box-sizing: border-box。
标签对齐错位不是“样式没写对”，而是浏览器默认行为在多个维度上叠加冲突的结果——vertical-align、box-sizing、display、基线位置、换行空白符，任何一个没控住，就 visibly 错位。
input 和 button 在同一行上下错位怎么 fix
即使设了相同 height，它们也大概率一高一低。这不是 bug，是 baseline 对齐机制天然不一致：input 的基线在文本底部（含下划线），button 的基线在文字内容的字体基线上；加上图标字体可能放大了 button 的实际盒高，错位就更明显。
- 最稳方案：父容器加
display: flex; align-items: center;，彻底绕过基线逻辑 - 兼容旧浏览器时，统一设
vertical-align: top;或middle;，再配font-size和line-height一致（比如都设font-size: 14px; line-height: 40px;） - 删掉 HTML 源码中
input和button之间的换行或空格，或给父容器设font-size: 0;再单独恢复子元素字号 - 别给两者单独加
margin-top或float，这会让对齐更不可控
table 里 td 包 input 边框不贴边
错位根源不是 td 本身，而是三重默认行为打架：td 默认有 padding，input 默认 vertical-align: baseline，而浏览器又把 input 当作内联元素按基线对齐，视觉上就“沉”在单元格下半部分。
- 清掉
td的内边距：td { padding: 0; } - 重置对齐方式：
td, input { vertical-align: top; }（top或bottom都比baseline可控） - 确保盒模型一致：
input { box-sizing: border-box; }，避免border和padding撑出宽度 - 移动端要防 focus 时跳动，加
min-width: 0;和自定义:focusoutline 样式
HTML5 语义标签（如 header、main）一加就布局错乱
这些标签本身没有样式，错位来自浏览器对它们的隐式 display 处理差异：IE11 当作 inline，Safari 给 section 加默认 margin，Chrome 早期版本把 main 当成普通流内元素却不自动撑高父容器。
立即学习“前端免费学习笔记（深入）”；
- 全局声明：
header, nav, section, article, aside, footer, main { display: block; } - 必须引入
html5shiv（仅 IE9–IE11）：<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> - 所有布局级语义标签，只要参与 flex/grid 布局，其父容器必须显式设
display: flex或display: grid，不能指望“自动生效” - 检查是否混用框架（如 Bootstrap）注入的
max-width或margin-left，它们常和语义标签产生意外交互
表单中 label 和 input 左右不对齐
错位主因是 label 默认按文字行高感知居中，input 默认按 baseline 对齐，二者基线位置不同；再加上 line-height 不一致、父容器有干扰值，视觉偏差就被放大。
- 把每组
label+input包进一个div，设display: flex; align-items: center; - 统一表单控件对齐基准：
input, select, textarea, button { vertical-align: middle; } - 确保父容器没继承异常
line-height，可显式设为line-height: normal; - iOS Safari 中
label定位容易偏移，加label { position: relative; top: -1px; }微调（仅必要时）
真正难的不是写对某一条 CSS，而是意识到：对齐问题从来不是孤立的，它暴露的是你对默认渲染规则、盒模型边界、浏览器兼容断层的真实掌控程度。哪怕只漏掉一个 box-sizing: border-box，或忘了 IE11 下 main 需要 display: block，错位就会在某个用户那里准时出现。
