input 和 button 并排底部不齐是因 vertical-align: baseline 的基线差异所致，应统一设为 middle 或 top，并确保 box-sizing、font-size、line-height 等属性显式一致。
input 和 button 并排时底部不齐，怎么 fix
这不是 bug，是浏览器默认渲染行为：button 的 vertical-align 默认为 baseline，而 input 默认也是 baseline，但两者基线位置不同——input 基线在文字底部（含下划线），button 基线在其内容字体上，加上 button 常带图标字体（如 font-size: 16px），实际盒高就更高。
直接设 height: 40px 不管用，因为 height 只控制盒高，不拉齐基线。真正要动的是对齐基准：
- 统一设
vertical-align: middle或top，别依赖baseline - 重置
box-sizing：都加box-sizing: border-box，避免 padding/border 撑出宽度 - 显式控制
line-height：对 button 加line-height: 40px（配合height: 40px），input 则靠padding控制视觉高度 - 删掉 HTML 换行空格：写成
<input><button></button>，或父容器设font-size: 0再单独恢复子元素字号
label 和 input 总是错位，flex 怎么套才不翻车
别把整个表单当一个 flex 容器，那是自找麻烦。正确做法是「每组 label+input 单独包一层」，让对齐逻辑局部化、可预测。
关键不是“让 input 跟 label 对齐”，而是让这一对元素在自己的小容器里垂直居中：
立即学习“前端免费学习笔记（深入）”；
- HTML 结构必须是
<div class="form-row"><label>用户名</label><input type="text"></div>，不能 label 和 input 分散在不同 div 里 - CSS 中
.form-row { display: flex; align-items: center; gap: 0.5em; }，gap替代 margin 更安全 -
label设flex: 0 0 100px（固定宽防换行挤压），input设flex: 1; min-width: 0（防止小屏溢出） - 避免给 input 单独加
margin-top或vertical-align，flex 容器里这些属性会被忽略或冲突
老项目要兼容 IE10，vertical-align 还能用吗
能，但必须更狠：不能只设 vertical-align: middle，得连带锁死 font-size 和 line-height。
IE10 下 button 和 input 的默认字体大小可能不同（尤其用了 icon font），哪怕 vertical-align 一致，视觉高度还是差几像素：
- 强制统一字号：
input, button { font-size: 14px !important; } - 用
line-height拉齐高度：button { line-height: 36px; height: 36px; }，input 则用padding模拟相同视觉高度 - 禁用
float：它会让元素脱离文档流，后续清除浮动容易引发新错位 - 慎用
all: unset：IE10 不支持，要用传统重置：border: 0; padding: 0; margin: 0;
为什么 width: 100% 的 input 总是撑破容器
因为默认 box-sizing: content-box —— width: 100% 只算内容区，加上默认 padding 和 border 就必然溢出。
按钮没这问题，往往是因为某些 CSS 框架或浏览器 UA 样式悄悄给 button 设了 box-sizing: border-box，而 input 没被照顾到：
- 全局重置最省事：
input, select, textarea, button { box-sizing: border-box; } - 如果只修个别元素，务必同时确认
padding和border值，比如padding: 8px; border: 1px solid #ccc;，那width: 100%才真等于容器宽度 - 父容器如果有
padding，input 的width: 100%是相对于父容器 content box 计算的，不是包含 padding 的总宽 —— 这时候要么改父容器box-sizing，要么给 input 设width: calc(100% - 20px)（对应父容器左右 padding 各 10px）
对齐问题本质不是样式写少了，而是浏览器默认行为太“有主见”。你得先承认它不一致，再用明确规则覆盖它。最容易被忽略的点是：同一行里多个表单元素，它们的 font-size、line-height、box-sizing 必须全部显式声明一致，缺一不可。
