垂直外边距合并：如何阻止相邻元素的合并？

垂直外边距合并

垂直外边距合并指的是当连续的元素具有顶部或底部的外边距时，这些外边距会合并为单个外边距。浏览器将合并相邻元素的外边距，直到遇到一个超出垂直流的元素（如浮动元素、绝对定位元素或清除浮动元素）。

合并后的情况

• 相加：位于同一垂直流相邻元素的外边距将相加。
• 取最大值：如果相邻元素中的一个具有较大的外边距，则合并后的外边距将取最大值。
• 仅保留一个：如果两个相邻元素具有不同的外边距方向（即一个有顶部外边距，另一个有底部外边距），则只保留一个外边距（通常是顶部外边距）。

阻止合并的方法

可以通过以下方法阻止垂直外边距合并：

• 添加非零边框（border）
• 添加非零内边距（padding）
• 创建块级格式上下文（block formatting context，简称 BFC）

以上就是垂直外边距合并：如何阻止相邻元素的合并？的详细内容，更多请关注其它相关文章！