纵向表单间距应由布局模型与基线对齐共同决定，而非依赖margin-bottom；统一设置label与控件vertical-align: middle可解决对齐问题，ios safari需额外line-height或padding补偿；推荐用flex布局（display: flex; align-items: center; gap: 8px）替代margin控制组间距；table布局中应通过td padding而非margin控制视觉间距，并注意rowspan计算及border-collapse对border-spacing的屏蔽。
纵向排列表单时，label 之间或 label 与后续控件之间的“间距感”不是靠 margin-bottom 硬撑出来的，而是由布局模型和基线对齐共同决定的——直接加 margin 容易在不同浏览器、不同字体尺寸下失效。
vertical-align: middle 是最简稳解
所有表单控件（input、select、textarea、button）默认 baseline 对齐，但 label 是内联文本容器，基线位置不一致。结果就是视觉上“一高一低”，看起来像间距不均。
- 统一给
label和所有控件加vertical-align: middle - 必须同时作用于两者，只设
label没用 - 注意：iOS Safari 中
label文字仍可能偏上，可额外加line-height: 1.4或padding-top: 2px补偿
用 flex 布局替代 margin 控制组间距
靠 margin-bottom 给每个 label 加间距，会在多行、响应式、缩放时出问题——比如文字换行后高度突变，margin 就不再对应“视觉行距”。
- 把每组
label+ 控件包进一个div.form-group .form-group { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }-
gap比margin更可靠：它只作用于 flex 子项之间，不受文字换行影响 - 若需 label 右对齐输入框，加
justify-content: flex-end并设label固定宽度（如width: 120px）
table 布局中 label 间距错位的真实原因
用 table 排纵向表单时，label 看起来“挤在一起”或“最后一行塌陷”，往往不是间距问题，而是 rowspan 计算错误或 border-collapse 干扰。
-
rowspan="5必须覆盖自身所在行 + 后续 4 行，少一行就会导致空行占位、内容错位 - 如果用了
border-collapse: collapse（Bootstrap/Normalize 默认），border-spacing失效，此时加padding在td上才是控制“视觉间距”的正路 - 别给
label设margin-bottom——td内边距由padding控制，margin在表格单元格里无效
真正影响纵向表单“呼吸感”的，从来不是某个单一属性，而是 vertical-align、display 模式、box-sizing 和父容器布局方式的组合效果。最容易被忽略的是：iOS Safari 对 label 的渲染偏差，以及 border-collapse: collapse 对 border-spacing 的静默屏蔽——这两点不查 Computed 样式，几乎不可能定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
