所谓“多余外边距”90%是margin塌陷或html空白字符导致的视觉错觉；父子塌陷因父元素无border/padding/content，子元素margin-top穿透合并；兄弟塌陷时垂直外边距取最大值而非相加；水平方向永不塌陷；单边距、flex gap、padding-top:0.1px、bfc（如overflow:hidden）均为有效解法。
直接说结论：所谓“多余外边距”，90%不是真的多，而是 margin 塌陷（collapse）或 HTML 空白字符渲染导致的视觉错觉。强行加 margin: 0 或删空格治标不治本，反而破坏语义和可维护性。
为什么给子元素设 margin-top 会把父元素一起拉下来？
这是典型的父子级 margin 塌陷：当父元素没有 border、padding、content（比如文字或图片）或 clearance 隔开时，子元素的 margin-top 会“穿透”到父元素外部，和父元素自身的 margin-top 合并——最终浏览器只取最大值，表现为整块下移。
- 触发条件必须同时满足：父元素是块级、在普通流中、无分隔（border/padding/content）、子元素是第一个流内块级子元素
-
overflow: hidden有效是因为它强制创建 BFC，BFC 内部的 margin 不会和外部合并 - 但
overflow: auto在某些滚动场景下会意外出现滚动条，overflow: hidden更稳妥
兄弟元素间间距比预期小，是不是 margin 没生效？
不是没生效，是两个 margin 合并了。比如 #box1 { margin-bottom: 20px; } 和 #box2 { margin-top: 10px; }，实际间距是 20px，不是 30px。
- 水平方向（
margin-left/margin-right）永远不会塌陷，这点可以放心 - 如果设计系统要求严格控制间距，建议统一用单边距：只设
margin-bottom，最后一个元素设margin-bottom: 0 - 用
flex布局时，gap完全绕过 margin 塌陷，且语义更清晰；但注意 IE 不支持gap
用 padding-top: 0.1px 打断塌陷，靠谱吗？
非常靠谱，而且是轻量级首选方案之一。只要父元素有哪怕 0.1px 的 padding-top，就破坏了塌陷前提（“中间无 border/padding/content 隔开”）。
- 视觉上完全不可见，不影响布局尺寸，也不增加边框带来的额外高度
- 兼容性极好，连 IE6 都支持，比
flow-root（IE/Safari 旧版不支持）更稳妥 - 适合组件库封装场景：你不能改子组件的
margin，但可以安全地给父容器加这行样式 - 注意别写成
padding: 0.1px 0 0 0——这样会重置所有方向 padding，可能破坏原有布局
HTML 换行和空格也会造成“间隙”？
会，但这和 margin 塌陷无关，是 inline-block 元素把换行符解析为文本节点（约 0.25em 宽）导致的。常见于导航栏、图标组等场景。
-
font-size: 0在父容器上能消除间隙，但所有含文字的子元素必须显式重设font-size，否则文字消失 - 更现代的做法是改用
display: flex，天然忽略源码空白；记得加gap: 0显式兜底，避免未来修改全局gap值引发问题 -
vertical-align: top对inline-block也有效，但只解决对齐问题，不消除间隙本身
真正容易被忽略的是：一个页面里往往同时存在多种“间隙”来源——父子塌陷、兄弟塌陷、inline-block 空白、img 基线对齐……调试前先用开发者工具的盒模型高亮确认间隙属于哪一类，再选对应解法。盲目套用 overflow 或 reset margin，可能掩盖真实问题，后续维护成本更高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
