Question

在身体和“标题”分区之间出现了一个奇怪的填充。如果我在“header”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;
}

Answer 1

标题中的.photo元素的上下边距为50px，这会影响父级。

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

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

我不能说为什么会发生这种情况，但这是MDN对行为的引用：

如果没有边框，填充，内联内容，高度或最小高度将块的边距顶部与其边距底部分开，则其顶部和底部边距会崩溃。

Source

第一个<div>之间的神秘填充，在向<div> </div> </div>添加边框时消失

1 个答案: