表单组垂直堆叠时外边距易塌陷，因控件默认块级且无边框/内边距，form 无溢出限制，触发父子与兄弟塌陷；解决法包括：触发 BFC（如 overflow: hidden）、统一用 padding 替代 margin、改用 flex+gap 布局。
表单组（form 内多个 input、label、button 等）垂直堆叠时，上下元素的 margin-top/margin-bottom 极易发生塌陷——你设了 16px 间距，实际只显示 16px 而非预期的叠加效果，甚至子元素的 margin-top 会“顶穿”父 form，把整个表单往下推。这不是 bug，是 CSS 标准行为，但必须主动干预。
为什么表单组特别容易塌陷？
表单控件默认是块级元素（display: block），且多数未设置 border 或 padding；form 元素本身通常无边框、无内边距、overflow 为 visible，完全满足父子塌陷和兄弟塌陷的全部条件。更麻烦的是，不同浏览器对 input[type="submit"]、button 的默认 margin 处理不一致，导致塌陷表现不稳定。
- 常见错误现象：
label设了margin-bottom: 12px，input设了margin-top: 8px，但两者之间只显示 12px； - 更隐蔽的问题：
form顶部空白过大，检查发现是第一个input的margin-top和form的上外边距合并了； - 使用重置样式（如
* { margin: 0; }）后问题消失，说明塌陷确实源于默认 margin 叠加。
用 BFC 隔离 form 容器最稳妥
给 form 元素触发 BFC，能同时拦截父子塌陷和兄弟塌陷，且不影响语义和可访问性。比单纯清 margin 更可靠。
- 推荐写法：
form { overflow: hidden; }或form { overflow: auto; }（后者兼容性略好）； - 避免用
float或position: absolute，会破坏表单流式布局； - 如果 form 需要圆角或阴影，
overflow: hidden还能顺便裁切溢出，一举两得； - 注意：若 form 内有绝对定位元素需溢出显示，改用
display: flow-root（现代浏览器支持良好，IE 不支持）。
统一用 padding 替代 margin 控制组内间距
在表单组内部，放弃在相邻控件间使用 margin，改用父容器的 padding 或单侧 margin，从源头规避兄弟塌陷。
立即学习“前端免费学习笔记（深入）”；
- 典型做法：给每个
input或label只设margin-bottom: 16px，其余方向不留 margin； - 或者直接给
form设padding: 16px 0，再让每个子项用margin: 0，靠 padding 提供呼吸感； - 这样既保持视觉节奏统一，又不会因某一项漏设 margin 导致间距突变；
- 注意：若表单含
fieldset，它自身也参与塌陷，需同样处理其margin或触发 BFC。
用 flex 布局彻底绕过塌陷
将 form 设为 display: flex 并垂直排列，所有子元素自动脱离普通文档流，margin 塌陷规则失效——这是目前最干净的解法，尤其适合现代表单。
- 基础配置：
form { display: flex; flex-direction: column; gap: 16px; }； -
gap属性替代 margin，安全、可控、无塌陷风险； - 兼容性注意：IE 不支持
gap，可降级为margin-bottom+:last-child { margin-bottom: 0; }； - 若表单需提交按钮右对齐，可用
margin-left: auto直接作用于button，无需额外包裹。
真正麻烦的不是塌陷本身，而是它常在表单嵌套、动态渲染或第三方组件中悄悄出现——比如一个封装好的 FormRow 组件，内部用了 margin-bottom，但被父级 form 的默认样式一“吸”，间距就没了。这时候光调数值没用，得看它是否处于 BFC 边界内、是否还在普通流里。动手前先打开开发者工具，选中元素看 computed margin 是否被合并，比猜更快。
