当两个边距垂直相互接触时,它们将被折叠。当两个边缘水平接触时,它们不会塌陷。
相邻垂直边距的示例:
考虑以下样式和标记:
div{ margin: 10px; }
<div> some content </div> <div> some more content </div>
由于垂直边距会相互重叠,因此它们之间的距离将为10px。(间距将不是两个边距的总和。)
相邻水平边距的示例:
考虑以下样式和标记:
span{ margin: 10px; }
<span>some</span><span>content</span>
它们之间的间距为20px,因为水平边距不会彼此重叠。(间距将是两个边距的总和。)
重叠大小不同
.top{ margin: 10px; } .bottom{ margin: 15px; }
<div class="top"> some content </div> <div class="bottom"> some more content </div>
这些元素在垂直方向上的间距为15px。边距尽可能多地重叠,但是较大的边距将确定元素之间的间距。
重叠保证金陷阱
.outer-top{ margin: 10px; } .inner-top{ margin: 15px; } .outer-bottom{ margin: 20px; } .inner-bottom{ margin: 25px; }
<div class="outer-top"> <div class="inner-top"> some content </div> </div> <div class="outer-bottom"> <div class="inner-bottom"> some more content </div> </div>
两种文字之间的间距是多少?(悬停以查看答案)
间距为25像素。由于所有四个边距彼此接触,因此它们将崩溃,从而使用四个边距中的最大边距。
现在,如果我们在上面的标记中添加一些边框呢?
div{ border: 1px solid red; }
两种文字之间的间距是多少?(悬停以查看答案)
间距将为59px!现在,只有.outer-top和.outer-bottom的边距彼此接触,并且是唯一折叠的边距。其余边距由边框分隔。所以我们有1px + 10px + 1px +15像素+ 20像素+ 1像素+ 25像素+ 1像素。(1px是边界...)
父子元素之间的折叠边距:
HTML:
<h1>Title</h1> <div> <p>Paragraph</p> </div>
的CSS
h1 { margin: 0; background: #cff; } div { margin: 50px 0 0 0; background: #cfc; } p { margin: 25px 0 0 0; background: #cf9; }
在上面的示例中,仅适用最大边距。您可能希望该段落位于距h1 60px的位置(因为div元素的边距顶部为40px,而p的边距顶部为20px)。这不会发生,因为边距一起塌陷以形成一个边距。