label与input“无间距”主因是display类型和vertical-align未对齐；label默认inline，padding-bottom不推移input；需设display:inline-block/block并配vertical-align或改用flex布局。
label 和 input 之间“看起来没间距”，通常不是缺 margin，而是 display 类型和 vertical-align 没对齐。
为什么 label 加 padding-bottom 不起作用
因为 label 默认是 inline 元素，它的 padding-top 和 padding-bottom 虽然渲染可见（尤其加了背景或边框时），但不会推开下方的 input——input 是块级或替换元素，按基线（baseline）贴着 label 的文字底部对齐，视觉上就“压在一起”了。
常见错误现象：label { padding-bottom: 20px; } 写了，DevTools 里能看到 padding 区域，但 input 位置完全不变。
- 必须先让
label支持高度控制：加display: inline-block或display: block - 如果用
block，记得给label设width，否则长文本会撑宽、短文本对不齐 - 如果用
inline-block，一定要配vertical-align: middle，否则仍可能错位
label 和 input 垂直居中对齐的关键 CSS
浏览器默认把 input 当作 baseline 对齐，而 label 的 baseline 在文字底部，input 的 baseline 实际在框体中间偏下位置，两者天然不齐。
最稳解法是统一用 flex 容器包裹每组：
div.form-row {
display: flex;
align-items: center;
margin-bottom: 12px;
}
label {
flex: 0 0 120px; /* 固定宽度，不伸缩 */
margin-right: 8px;
}
input, select, textarea {
flex: 1;
vertical-align: middle; /* 配合 flex 时其实可省，但留着更保险 */
}
- 不用
float或table，避免清除浮动或单元格塌陷问题 -
align-items: center比vertical-align: middle更可靠，后者在非 inline/inline-block 场景下无效 - 如果表单要兼容 IE11，改用
display: table-cell+vertical-align: middle，但需额外 wrapper
水平间距控制：别只靠 margin-right
单纯给 input 加 margin-right 容易导致最后一项多出空白，且响应式断行时行为不可控。
推荐用父容器的 gap（现代浏览器）或 margin-bottom 控制组间距：
- 组内水平间距：用
label的margin-right，比如margin-right: 12px - 组与组之间：统一在
.form-row上设margin-bottom: 16px - 想用 gap？确保父容器是
display: flex或display: grid，然后写gap: 12px，它会自动跳过最后一项 - 避免对
input设margin-left——当 label 缺失或动态插入时，布局容易崩
真正难调的不是数值，而是 display 类型切换后带来的盒模型变化；比如 box-sizing: border-box 忘加，padding 就会让 input 宽度超限；又比如 line-height 被父元素继承，悄悄抬高了 label 的基线位置——这些细节不查 DevTools 很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
