css如何实现外边距合并

这篇文章主要介绍了CSS如何实现外边距合并，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

外边距分开（叠加）是一个相称容易的观点。然则，在实践中对网页进行布局时，它会造成许多混同。

简单地说，外边距兼并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。兼并后的外边距的高度等于两个产生分开的外边距的高度中的较大者。

当一个元素呈当时另外一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会孕育发生归并。请看下图：

亲身试一试

当一个元素包孕在另一个元素中时（假定没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会产生兼并。请看下图：

亲自试一试

虽然看下去有些奇怪，但是外边距乃至可以与自己发生发火兼并。

如果有一个空元素，它有外边距，可是没有边框或填充。在这类环境下，上外边距与下外边距就遇到了一同，它们会发生合并：

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

这即是一系列的段落元素占用空间很是小的缘由，因为它们的一切外边距都分隔隔离分散到一路，形成了一个小的外边距。

外边距吞并初看上来可以有点奇怪，但是实在，它是蓄含意的。以由几个段落组成的模范文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距兼并，后续所有段落之间的外边距都将是相邻上外边距与下外边距的与。这意味着段落之间的空间是页面顶部的两倍。如果发生发火外边距分开，段落之间的上外边距与下外边距就吞并在一起，如许到处的隔断就一致了。

注释：只需平凡文档流中块框的垂直外边距才会孕育发生外边距分隔。行内框、浮动框或相对于定位之间的外边距不会归并。

感谢你能够认真阅读完这篇文章，希望小编分享的“css如何实现外边距合并”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网JavaScript频道，更多相关知识等着你来学习!