CSS外边距不生效主因是外边距塌陷或脱离标准流：浮动、绝对定位、行内元素会使margin异常；垂直相邻/父子块级元素margin会合并；需用padding、border或BFC解决。
CSS外边距（margin）不生效，多数不是写错了属性，而是它“被合并了”或“没地方可撑开”。关键要理解：margin只在标准流中起作用，且垂直方向存在天然的塌陷行为——这不是bug，是规范。
先确认是否处于标准文档流
如果元素设置了 float、position: absolute/fixed 或 display: inline 等脱离标准流的样式，它的 margin 就可能失效或表现异常。比如：
- 浮动元素的 margin-top 有时会“飘”到父容器外，看起来像没生效；
- 绝对定位元素的 margin 不影响其他元素布局，只影响自身偏移后的占位；
- 行内元素（如 span）的上下 margin 完全无效，左右 margin 可能生效但不推挤行高。
检查是否触发了外边距塌陷（Margin Collapse）
这是最常被忽略的原因。垂直方向上，相邻块级元素的 margin 会自动合并为一个，取其中较大值；父子之间也可能发生“传递式塌陷”——子元素的 margin-top 直接“顶穿”父元素顶部。
- 兄弟元素塌陷：.box1 设置 margin-bottom: 30px，.box2 设置 margin-top: 10px → 实际间距是 30px；
- 父子塌陷：父容器无 border/padding/overflow，子元素设 margin-top: 20px → 父容器顶部也出现 20px 空隙；
- 空元素塌陷：空 div 设 margin-top: 50px，高度仍为 0，视觉上“消失”，因为没有内容撑开盒模型。
验证 margin 是否真被覆盖或重置
全局重置样式（如 * { margin: 0; }）或更高优先级规则可能覆盖你的设置。用浏览器开发者工具检查 computed 样式中的 margin 值：
立即学习“前端免费学习笔记（深入）”；
- 看 margin-top 是否显示为期望数值（如 20px），还是被 override 成 0；
- 检查是否有继承自父级的 margin，或被 !important 规则压制；
- 注意单位错误，比如写成 margin-top: 20，漏掉 px/em/% 单位，某些浏览器会直接忽略。
常见解决思路（按推荐顺序）
针对塌陷问题，优先选择语义清晰、副作用小的方式：
- 父子塌陷 → 给父元素加 padding-top: 1px 或 border-top: 1px solid transparent；
- 兄弟塌陷 → 只给上方元素设 margin-bottom，下方元素不设 margin-top；
- 想彻底隔离 → 给父容器设 overflow: hidden 或 display: flex（自动创建 BFC）；
- 空元素需高度 → 改用 padding-top 替代 margin-top，padding 对空元素始终有效。
不复杂但容易忽略：margin 是描述“元素与其他元素之间的距离”，不是“元素自身位置的偏移”。想控制内部留白，优先用 padding；想控制布局间距，确保元素在标准流中，并留意垂直方向的塌陷规则。
