CSS保证金崩溃
时间:2020-03-06 14:26:25 来源:igfitidea点击:
因此,当我们没有为给定的div元素设置任何页边距,填充或者边框时,页边距是否会发生塌陷?
解决方案
"the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin."
资料来源:Box模型8.3.1倒塌的边距
不会。当我们有两个相邻的垂直边距时,将使用两者中较大的一个,而另一个将被忽略。
因此,例如,如果我们有两个块显示元素,A,其下是B,并且A的下边距为3em,而B的上边距为2em,则它们之间的距离将为3 。
如果设置边框或者内边距,则可以防止折叠。在上面的示例中,两个元素之间的距离将为5em。
如果我们没有设置任何边距,那么将没有任何边距要崩溃。它与所使用的元素类型无关,它适用于所有元素类型,而不仅仅是<div>
元素。
阅读CSS 2.1规范以获取更多详细信息。