表单元素默认 box-sizing 是 content-box，导致 width 不包含 padding 和 border，易引发布局错位；应全局设为 border-box，并用 .form-group 控制间距、flex + align-items:center 解决对齐问题。
表单元素默认 box-sizing 是什么？为什么间距总对不上
绝大多数浏览器下，<input>、<select>、<textarea> 的默认 box-sizing 是 content-box。这意味着你设的 width: 100% 只作用于内容区，而 padding 和 border 会额外撑开宽度，导致换行、溢出或左右不对齐。
解决方法很简单：全局重置表单控件的盒模型
input, select, textarea, button {
box-sizing: border-box;
}
这样所有尺寸声明（width、height）就包含 padding 和 border，布局更可预测。
用 margin 控制表单元素垂直间距时的常见踩坑点
直接给每个 <input> 加 margin-bottom: 16px 看似合理，但容易在以下场景出问题：
立即学习“前端免费学习笔记（深入）”；
- 最后一个元素多出多余空白（没有“末尾不加 margin”的语义）
- 响应式断点切换时，
margin值没随布局缩放，造成比例失调 - 和
label配合时，label的display类型影响基线对齐，让视觉间距错位
推荐做法是用父容器控制间距逻辑：
.form-group {
margin-bottom: 16px;
}
.form-group:last-child {
margin-bottom: 0;
}
然后每个表单项包裹在 <div class="form-group"> 里。这样语义清晰，也方便后续加动画或状态样式。
flex 布局中 gap 能不能直接用于表单？兼容性怎么看
可以，但要注意：旧版 Safari（gap，而表单常需兼容企业内网环境。
如果确定目标环境支持现代 CSS，用 display: flex; flex-direction: column; gap: 12px; 是最干净的方案——它自动跳过首尾间隙，且不会因 margin 折叠引发意外行为。
若需兼容，可用 margin + :not(:last-child) 替代：
.form-stack > *:not(:last-child) {
margin-bottom: 12px;
}
注意：不要混用 gap 和 margin，否则间距会叠加。
表单中 label 和 input 水平对齐为什么总偏移
根本原因是默认 vertical-align: baseline 在行内元素（如 label 文本）和替换元素（如 input）之间计算方式不同。哪怕都设了 height 和 line-height，依然可能错位。
可靠解法只有两个：
- 把两者都设为
display: flex容器下的子项，并用align-items: center - 统一设为
vertical-align: middle，并确保父容器有明确line-height
更推荐前者，因为可控性高，且能自然处理多行 textarea 或带图标的输入框：
.form-row {
display: flex;
align-items: center;
gap: 8px;
}
.form-row label {
flex: 0 0 120px;
}
.form-row input {
flex: 1;
}
这里 gap 控制标签与控件间距，flex 控制宽度分配，比用 float 或 inline-block 稳定得多。
