CSS中外边距合并及BFC解决方案

最新推荐文章于 2025-07-02 20:05:47 发布

Cacra

最新推荐文章于 2025-07-02 20:05:47 发布

阅读量719

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/u014465934/article/details/88676842

本文详细介绍了CSS中外边距合并的现象及其三种常见情况，并提供了阻止外边距合并的通用方法。此外，重点讲解了BFC（Block Formatting Context）的概念，以及如何利用BFC解决外边距重叠、浮动元素高度计算等问题，为实现更精确的布局控制提供解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.外边距合并

块的顶部外边距和底部外边距有时候会被折叠为单个外边距，其大小为两值中的最大值，这种行为就被称为外边距合并。

一般发生外边距合并主要有以下三种情况：
1.相邻兄弟姐妹元素
2.父元素和子元素
3.空元素

相邻兄弟姐妹元素

两个兄弟元素之间的外边距，会取两个元素外边距的最大值。

<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p>
<p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>

按照上面的例子可以得出，两个p元素之间距离为30px。

父元素和子元素

这种情况又可以分为以下两种：
1.父元素的上外边距和第一个子元素的上外边距
2.父元素的下外边距和最后一个子元素的下外边距

这两种情况，最终显示出来的结果都是取二者中的最大值。

空元素

自己的上外边距会和自己的下外边距合并

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

在这里插入图片描述

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

200万优质内容无限畅学