子元素上的边距移动父元素

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

.child
{
    margin-top: 10px;
}

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

我的DOCTYPE被设置为XHTML Transitional。

我错过了什么?

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

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

当前回答

边框解决方案很好，但不是最好的，因为它增加了元素的总宽度，即使是透明的

但是负边界宽度呢?不工作:(

但我们仍然可以用box-sizing属性来实现使边界向负方向移动

.parent{
   border:5px solid transparent;
   box-sizing: border-box;
 }
.child{
   margin-top:5px; 
 }

注意，如果你想要10px的上边距，你必须只添加5px的边距，因为5px的上边距仍然会产生影响，这个原因是为了防止崩溃问题。

其他回答

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

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

父元素不能为空，至少要放 在子元素之前。

这对我来说很管用

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

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

玩父母显示

.parent{
     display: inline-block;
     width: 100%;
}

.parent{ display: flex; }

我发现，在你的.css >中，如果你设置一个div元素的显示属性为内联块，它就会修复这个问题。保证金会像预期的那样起作用。

推荐文章