Question

我有一个网站，其布局类似于：

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <body style="margin:0px">
    <div style="border-left: 5px solid black;">
      <div><!-- x -->
        <div>
          <div>
            <div style="margin-top: 100px">
              fish
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

我希望整个页面左侧有一个边框。然而，似乎深度嵌套的div的100px上边距导致其祖先的边界左侧被推倒。

出于某种原因，如果我取消注释“x”，一切看起来都很棒。

发生什么事了？！？！

Answer 1

即使包含元素，边距也会崩溃，因此内部div的边距正在推动外部div。幸运的是，解决方案很简单：将“overflow: auto”添加到外部div的样式（带边框的样式）。

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <body style="margin:0px">
    <div style="border-left: 5px solid black; overflow: auto;">
      <div><div><div>
        <div style="margin-top: 100px">fish</div>
      </div></div></div>
    </div>
  </body>
</html>

Answer 2

出于某种原因，如果我取消注释“x”，一切看起来都很棒。

是的，当'x'到位时，在子边缘顶部和父边缘顶部之间存在一些内容。边距不能通过内容，填充或边框折叠，因此另一个修复是在边缘div和边界div之间的任何元素上放置任意数量的顶部填充或边框。例如，如果边界元素也有一个顶部边框，左边框将跳起来将它连接在顶部。

Ben的答案是一种常见的方法，使用副作用来防止边缘折叠，因为section 8.3.1 of CSS2.1中的这一行：

“溢出”除“可见”以外的元素的垂直边距不会因其流入的子节点而崩溃。

但为了清楚起见，如果可以的话，最好避免边际崩溃。在可能的情况下使用填充优先于顶部和底部边距通常是一个很好的策略，因为CSS中的边距折叠规则不直观且无益，并且会一次又一次地咬你 - 甚至忽略了IE6实现中的错误。

为什么我的边框不会一直到屏幕顶部？

2 个答案: