我有一个包含另一个div(子)的div(父)。Parent是body中的第一个元素,没有特定的CSS样式。当我设置

.child
{
    margin-top: 10px;
}

最终的结果是我的子的顶部仍然与父对齐。我的父结点向下移动10px,而不是子结点向下移动10px。

我的DOCTYPE被设置为XHTML Transitional。

我错过了什么?

编辑1 我的父母需要有严格定义的尺寸,因为它有一个背景,必须显示在它下面从上到下(像素完美)。所以不能在上面设置垂直边距。

编辑2 这种行为在FF、IE和CR上都是一样的。


当前回答

是关于保证金崩溃的。

块的顶部和底部边距有时会合并(折叠)为单个边距,其大小是单个边距中最大的(如果它们相等,则仅为其中之一),这种行为称为边距折叠。

根据具体情况,有几种解决方案。 一种解决方案是改变子节点的显示模式。

.child {
  display: inline-block;
}

也很高兴知道。边距收缩不适用于柔性容器或网格容器。

.parent {
  display: flex;
  flex-direction: column;
}

或者使用父元素的填充而不是子元素的边缘。改变溢出或浮动属性也会有所帮助。或者绝对位置。这取决于你的布局。

其他回答

这是正常的行为(至少在浏览器实现中)。边距不会影响子元素相对于父元素的位置,除非父元素有边距,在这种情况下,大多数浏览器会将子元素的边距添加到父元素的边距中。

为了得到你想要的行为,你需要:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

是关于保证金崩溃的。

块的顶部和底部边距有时会合并(折叠)为单个边距,其大小是单个边距中最大的(如果它们相等,则仅为其中之一),这种行为称为边距折叠。

根据具体情况,有几种解决方案。 一种解决方案是改变子节点的显示模式。

.child {
  display: inline-block;
}

也很高兴知道。边距收缩不适用于柔性容器或网格容器。

.parent {
  display: flex;
  flex-direction: column;
}

或者使用父元素的填充而不是子元素的边缘。改变溢出或浮动属性也会有所帮助。或者绝对位置。这取决于你的布局。

我也有这个问题,但更喜欢防止负利润率黑客,所以我放了一个

<div class=“supercontainer”></div>

周围有填充而不是边距。当然,这意味着更多的性炎,但这可能是最干净的方法来做到这一点。

为子元素添加样式显示:inline-block

有趣的是,这里没有提到我最喜欢的解决方案:使用浮动。

html:

<div class="parent">
    <div class="child"></div>
</div>

css:

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

点击这里查看:http://codepen.io/anon/pen/Iphol

注意,如果你需要父节点上的动态高度,它也必须是浮动的,所以只需替换height:100px;通过浮动:左;