外边距塌陷是CSS规范行为，指垂直方向块级元素间相邻或嵌套的margin自动合并为单个值；常见于父子（子margin-top顶穿父容器）和兄弟元素（上下margin取最大而非累加）间；可通过padding替代、flow-root触发BFC、gap或隔离层等方案解决。
CSS中所谓的“内外边距重叠”，准确说是外边距塌陷（margin collapse）——它只发生在垂直方向的块级元素之间，不是padding和margin互相叠加，而是相邻或嵌套的margin自动合并成一个值。常见于父子元素间（子元素的margin-top“顶穿”父容器）或兄弟元素间（两个div上下紧挨，上下margin不累加而取最大）。关键在于：它属于CSS规范行为，不是bug，但常导致布局“意外留白”或“高度丢失”。
最典型场景：父div没border/padding/overflow，子div设了margin-top，结果整个父容器被往下推，顶部空白实际来自子元素，但视觉上像父容器自己有了上边距。
比如两个段落都设了 margin-bottom: 20px 和 margin-top: 20px，你以为间距是40px，实际只有20px（取较大值）。
BFC（块级格式化上下文）让元素变成独立布局容器，内部margin不再影响外部。现代推荐写法简洁安全：
立即学习“前端免费学习笔记（深入）”；
padding是内容区到边框的距离，天然不参与塌陷；用它代替margin，逻辑更贴近设计意图：“这段文字离容器顶部该有多远”，而不是“这段文字要推开上面谁”。配合 box-sizing: border-box，还能让width/height包含padding，尺寸计算不混乱。
基本上就这些。塌陷本身不难理解，关键是选对方法：日常开发中，优先用 padding + flow-root 组合，既语义清晰又稳定可靠。
以上就是css内外边距重叠怎么办_margin-collapse原理与padding替代方案的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
653
收藏
