用 margin 控制表单控件间距最直接有效，推荐统一设置 margin-bottom，配合 .form-group 包裹结构和 form { margin: 0; } 避免叠加空白；横向排列需设 display: inline-block 或 flex + gap；表格中优先调整 td padding 和 vertical-align。
直接用 margin 控制 input、select 等控件的间距
绝大多数表单拥挤问题，根源就是控件默认没外边距。margin 是最直白、兼容性最好、调试最直观的解法，不用改结构、不依赖 Flex/Grid。
常见错误是只加 margin-right 却忽略垂直方向，结果横向排得开，纵向还是贴在一起；或者给 input 加 margin-top，却发现没效果——因为默认是行内元素，margin-top/bottom 对它无效。
- 统一加垂直间距：
input, select, textarea, button { margin-bottom: 8px; } - 若需横向排列（如多个 radio 或 checkbox），先设
display: inline-block;再加margin-right: 12px; - 避免对
label单独加 margin：它和控件的对齐关系更依赖vertical-align和父容器 line-height
用 form-group 包裹 label + 控件，再设 margin-bottom
比全局设控件 margin 更可控，尤其适合混合类型表单（比如有的组是单行输入，有的是多行 textarea + 按钮）。这个模式不依赖 display 类型，也不受 inline 元素限制。
容易踩的坑是忘记重置 form 自身的默认 margin：现代浏览器里 form 没上下 margin，但 IE6/7 有，如果项目还要兼容旧环境，或用了某些重置不彻底的 CSS 库，form 的 margin 会和 .form-group 叠加，导致首尾多出一截空白。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
.form-group { margin-bottom: 16px; }，并确保form { margin: 0; } - 不要用
<br>
或空<div> 隔开表单项——语义错、不可维护、响应式下易断裂 <li>移动端可配合媒体查询微调：<code>@media (max-width: 768px) { .form-group { margin-bottom: 12px; } } - 结构必须是：
<div class="form-row"><label>...</label><input></div> - CSS：
.form-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } - gap 支持所有现代浏览器（IE 不支持，但 IE 已退出主流开发），比一堆
margin-right更干净，也避免最后一个元素多出多余间距 - 基础修复：
td { padding: 6px 10px; }，再根据控件高度微调（如input[type="text"] { height: 32px; }） - 若要垂直居中，加
td { vertical-align: middle; }，比在input上设line-height更可靠 - 避免在
td上写text-align: right来右对齐控件——它会影响所有内联内容，包括文字、图标、span，容易误伤
vertical-align: middle 不够稳？那就 flex + align-items
单纯设 vertical-align: middle 在 iOS Safari 或某些字体渲染场景下仍可能偏上，尤其当 label 文字和 input 高度不一致时。用 display: flex 是更确定的对齐方式，且能顺便控制水平 gap。
注意：别在 form 上直接设 display: flex——它会让所有子元素（包括 h2、p、button）强行同行排列，破坏语义流。应该只作用于每组 label + input 的包裹容器。
表格中嵌套表单控件时，td padding 是第一道防线
把 input 塞进 <td> 里，不设 padding 就会紧贴单元格边框，视觉上像“陷进去”。这不是控件的问题，而是 td 默认 padding 为 0 或极小（不同浏览器略有差异）。
很多人试图用 input { margin: 4px; } 往外撑，结果发现按钮文字被裁切、边框错位——因为 margin 会扩大控件整体尺寸，而 td 没预留空间。正确顺序是：先由 td 提供呼吸区，再让控件在里面居中。
form 标签自身的 margin 与框架重置样式的冲突，以及在表格中混用表单控件时，td 的 padding 和 vertical-align 必须同步处理——少一个，控件就可能“悬空”或“下沉”。
