<body> 和第一个 <div> 之间的神秘填充在向 <div> 添加边框时消失答案

【问题标题】：Mysterious padding between <body> and first <div> which disappears on adding a border to the <div><body> 和第一个 <div> 之间的神秘填充在向 <div> 添加边框时消失
【发布时间】：2015-02-23 04:08:00
【问题描述】：

请看这个小提琴 http://jsfiddle.net/a506r2gh/

在正文和“标题”部分之间出现了一个奇怪的填充。如果我在“标题”div 中添加边框，它就会消失。边缘崩溃和正文边缘似乎不是这里的问题。

提前致谢！

这里是html

<body>
    <div class="header">
        <a href="#"><div class="photo"></div></a>
        <div class="footer"></div>
    </div>
</body>

这是css

body {
    margin:0; padding:0; background: #999;
}
.header {
    background-color: #422;
    /* border: solid 1px red; */ /* problem goes away if I add border to header */
}
.header .photo {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background: #660;
    margin:50px auto;
}
.footer {
    height:50px;
    background: #303;
    margin-bottom:50px;
}

【问题讨论】：

.header .photo 有 margin-top: 50px 因此差距。给溢出：自动到.header
谢谢@anpsmn。这样可行。当我在 div 上添加边框时，为什么填充消失了？
填充实际上是 .photo 上的边距，它与 #header 一起折叠并呈现在它之外。

标签： html css header

【解决方案1】：

标题中的.photo 元素的顶部和底部边距为 50 像素，这会影响父级。

为防止这种情况发生，请将overflow: auto 添加到.header。

还有several other ways可以解决这个问题。

我无法说明为什么会发生这种情况，但这里引用了 MDN 关于这种行为的一段话：

如果没有边框、内边距、内联内容、高度或最小高度将块的上边距与其下边距分开，则其上边距和下边距折叠。

Source

【讨论】：

哦...我从 MDN 引用中看到，为什么添加边框会影响这个！太棒了:) 谢谢。