CSS 外边距合并_html/css_WEB-ITnose
程序员文章站
2022-04-21 22:03:05
...
外边距合并是CSS中一个特殊的概念。当两个外边距相邻时,它们会合并为较大的那一个。 无论是相邻元素的上下边距,还是父子元素的上边距,甚至是同一元素的上下边距。
相邻元素
当两个元素上下相邻时,上面的下外边距会与下面元素的上外边距会合并。
如果元素左右相邻呢?一个典型的场景是几个 inline-block 元素并排显示。 但 inline-block 元素的外边距是不合并的,它们会保持自己的间隔。
inline-block 的上下外边距仍然是不起作用的,因为它们是行内元素呀!
父子元素
父子元素如果都有上边距,会合并为其中较大的那一个。
当然,只有两个外边距直接相邻时才会合并。如果父元素有内边距( padding )或边框( border ),那么它们不会被合并。
单个元素
如果一个元素没有内容,也没有内边距和边框,那么它的上下外边距也会合并。
很奇怪对吧,还有更奇怪的:连续相邻的外边距都是可以合并的。 空元素的上下边距合并时,如果紧接着另一个元素的外边距,它们都会合并到一起。
这就是为什么连续的
其实占位很小。它们的上下边距会合并, 空元素的上下边距也会合并。这一布局行为在这个场景下是非常有用的。