CSS将div垂直向下移动

Question

我试图将另一个div内的div向下移动一点，但是当我使用

margin-top: 10px;

它在顶部形成白色缝隙。 继承人的HTML：

<div id="topb">
    <div id="selection">

    </div>
</div>

这是CSS：

#topb {
    background: url(images/tomato-background.jpg) no-repeat fixed;
    background-size: cover;
    height: 100%;
    width: 101%;
    margin-left: -10px;
}

#selection {
    background-color: #4d4d4d;
    width: 60%;
    height: 500px;
    margin: auto;
    margin-top: 40px;
}

这是网站的屏幕截图：

Answer 1

删除#selection中的margin-top样式，并将padding-top应用于#topb

Answer 2

这是一个“折叠边距”问题。 已回答以下问题： 为什么父元素不包含边距？

您必须将父div更改为（1）添加边框，（2）绝对位置，（3）显示为行内块，（4）自动溢出。

请参阅发布的链接以获取更多详细信息。

Answer 3

也许您可以通过添加padding-top:10px;来修改父元素padding-top:10px; 而不是修改孩子。

Answer 4

为此，您可以使用position: absolute 。 这是代码：

 #topb { background: url(images/tomato-background.jpg) no-repeat fixed; background-size: cover; height: 100%; width: 101%; margin-left: -10px; } #selection { background-color: #4d4d4d; width: 60%; height: 500px; margin: auto; position: absolute; top: 40px; /*This is where it is changed as well as the line above*/ } 

希望能帮助到你！ 我认为填充仍然会留下背景，因此这是一个更好的主意。

Answer 5

这是工作中的提琴，希望对您有所帮助。

position:absolute;
position:relative;

Answer 6

这是因为当您在另一个图块元素中包含一个图块元素（显示：图块）时，边距将收缩。 它只会被认为是最大的保证金。

因此，在您的示例中，它将仅考虑边距之一（40像素）。 请参见有关边距崩溃的参考 。

有一些解决方法。 选择任何：

1. 使用padding而不是内部组件的margin 。
2. 更改display类型。 例如display: inline-block 。
3. 使用absolute定位。