CSS 中的嵌套垂直边距折叠如何工作？-css教程-PHP中文网

CSS 中的嵌套垂直边距折叠如何工作？

Linda Hamilton

发布： 2024-11-02 20:26:02

原创

699 人浏览过

How Do Nested Vertical Margin Collapses Work in CSS?

理解嵌套垂直边距折叠的细微差别

在 CSS 中，边距折叠的概念在确定元素之间的间距方面起着至关重要的作用在网页上。当垂直相邻元素的边距接触时，它们会折叠成单个边距，从而导致意外的行为。嵌套垂直边距折叠使这种行为进一步复杂化。

嵌套边距折叠的机制

当两个元素相互嵌套并且它们的边距接触时，以下两条规则适用：

边距折叠：边距折叠成单个边距，其最大各个边距的高度。
依偎：内部元素“依偎”其容器的顶部边框，消除元素之间的任何空间。

例如，考虑以下 HTML 和 CSS :

<code class="html"><div id="outer">
  <div id="inner">
    A
  </div>
</div></code>

登录后复制

<code class="css">#outer {
  margin-top: 10px;
  background: blue;
  height: 100px;
}
#inner {
  margin-top: 20px;
  background: red;
  height: 33%;
  width: 33%;
}</code>

登录后复制

在这种情况下，边距折叠到 20px（10px 和 20px 的最大值），并且内部 div 紧贴外部 div 的顶部。

但是，如果任何内容或边框分隔两个边距，折叠就会丢失。在元素之间添加不间断空格或边框时可能会发生这种情况，如下所示：

<code class="html"><div id="outer">
  <div id="inner">
     
    A
  </div>
</div></code>

登录后复制

注意： 此行为不适用于定位为绝对、固定、或漂浮。

以上是CSS 中的嵌套垂直边距折叠如何工作？的详细内容。更多信息请关注PHP中文网其他相关文章！