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

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

.child
{
    margin-top: 10px;
}

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

我的DOCTYPE被设置为XHTML Transitional。

我错过了什么?

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

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

当前回答

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

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

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

.parent {
  display: flow-root;
}

其他回答

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

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

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

玩父母显示

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

.parent{ display: flex; }

在我知道正确答案之前，我找到了另一个解决方案，即向父元素添加透明边框。

你的盒子将使用额外的像素…

.parent {
    border:1px solid transparent;
}

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

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

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

.parent {
  display: flow-root;
}

这对我来说很管用

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

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

推荐文章