外边距合并

2024-01-18 10:50 小编

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

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

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

CSS 外边距合并实例 1 

亲身试一试

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

CSS 外边距合并实例 2 

亲自试一试

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

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

CSS 外边距合并实例 3

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

CSS 外边距合并实例 4

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

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

CSS 外边距合并的实际意义

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


在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码