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

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。幸运的是，解决方案很简单:在外部div的样式(带边框的样式)中添加"overflow: auto“。

<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中的这一行

具有“overflow”而不是“visible”的元素的垂直边距不会随其流入子元素一起折叠。

但为了清楚起见，如果可以的话，最好避免利润率崩溃。在可能的情况下优先使用填充而不是上边距和下边距通常是一个好策略，因为CSS中的边距折叠规则是不直观和没有帮助的，甚至会一次又一次地 - 你，甚至忽略ie6实现中的错误。