<body>和第一个<div>之间出现神秘的填充，但在向<div>添加边框后消失

Question

<body>和第一个<div>之间出现神秘的填充，但在向<div>添加边框后消失

3

请查看这个fiddle：http://jsfiddle.net/a506r2gh/ 在body和“header”分区之间出现了奇怪的填充。如果我给“header” div添加一个边框，它就会消失。这里似乎不是边距折叠和body边距的问题。

提前感谢！

以下是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;
}

- Prateek Verma

2

.header .photo 有 margin-top: 50px，因此出现了间隙。请给 .header 添加 overflow: auto。 - anpsmn

1

感谢 @anpsmn。那个有效。为什么我在 div 上添加边框时填充会消失？ - Prateek Verma

1

实际上，填充是.photo上与#header发生折叠并渲染在其外部的边距。 - Salman A

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Purag · Accepted Answer

您的头部中的.photo元素具有50px的顶部和底部边距，这会影响父元素。

为了防止这种情况，请在.header中添加overflow: auto。

还有其他几种方法可以解决这个问题。

我无法解释为什么会发生这种情况，但以下是MDN关于该行为的一句话引用：

如果没有边框、填充、内联内容、高度或最小高度来分隔块的margin-top和margin-bottom，则它的顶部和底部margin会折叠。

来源