我有一个包含另一个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;通过浮动:左;