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

.child
{
    margin-top: 10px;
}

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

我的DOCTYPE被设置为XHTML Transitional。

我错过了什么?

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

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


当前回答

虽然所有的答案都解决了问题,但它们都伴随着权衡/调整/妥协,比如

floats, You have to float elements border-top, This pushes the parent at least 1px downwards which should then be adjusted with introducing -1px margin to the parent element itself. This can create problems when parent already has margin-top in relative units. padding-top, same effect as using border-top overflow: hidden, Can't be used when parent should display overflowing content, like a drop down menu overflow: auto, Introduces scrollbars for parent element that has (intentionally) overflowing content (like shadows or tool tip's triangle)

这个问题可以通过使用CSS3伪元素来解决,如下所示

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

其他回答

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

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;通过浮动:左;

你可以通过在伪元素display: flex;给父母。

.parent:before {
  content: '';
  display: flex;
}

另一种方法是将父节点的display属性设置为flow-root。

.parent {
  display: flow-root;
}

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

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

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

在DIVs内的子元素中找到了一个边距的替代方法,您还可以添加:

.parent { overflow: auto; }

or:

.parent { overflow: hidden; }

这可以防止边际崩溃。边框和填充也是如此。 因此,你也可以使用以下方法来防止最高利润崩溃:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

2021年更新:如果你愿意放弃IE11支持,你也可以使用新的CSS结构display: flow-root。有关块格式上下文的全部细节,请参阅MDN Web文档。


按大众要求更新: 缩边距的全部意义在于处理文本内容。例如:

H1, h2, p, ul { margin-top: 1 em; margin-bottom: 1 em; 轮廓:1px蓝色虚线; } Div{大纲:1px固体红色;} <标题>标题!< / h1 > < div class = " text " > < h2 >标题!< / h2 > < p > < / p >款 < / div > < div class = " text " > < h2 >标题!< / h2 > < p > < / p >款 < ul > <李>列表项李< / > < / ul > < / div >

由于浏览器折叠了页边距,因此文本将按照您所期望的方式显示,并且<div>包装器标记不会影响页边距。每个元素确保其周围有间距,但间距不会加倍。<h2>和<p>的裕度不会叠加,而是相互滑入(它们坍缩)。<p>和<ul>元素也是如此。

可悲的是,在现代设计中,当你明确地想要一个容器时,这个想法会让你感到不快。这在CSS中被称为新的块格式化上下文。溢出或边距技巧会给你这个。

如果合适的话,使用top而不是margin-top是另一种可能的解决方案。