Question

如果静态定位元素不受顶部，底部，左侧和右侧属性的影响，为什么当我更改框元素的margin-top值时，框与容器一起移动？

我将代码保存在：https://jsfiddle.net/b9rtwkq7/5/

HTML：

<div class="container">
    <div class="box">
    </div>
</div>

CSS：

.container
{
    width:500px;
    height: 500px;
    background-color: grey;
    margin-top: 00px;
}

.box
{
    width:100px;
    height: 100px;
    background-color: orange;
    margin-top: 100px;

}

Answer 1

您发布的jsfiddle中的边距已折叠：https://www.w3.org/TR/CSS2/box.html#collapsing-margins

添加溢出：自动/隐藏到.container或使用我在一个名为.no-collapse的类中添加的以下css：

.no-collapse:before {
    content: "";
    display: table;
}

为什么静态元素会移动？

1 个答案: