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

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

.child
{
    margin-top: 10px;
}

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

我的DOCTYPE被设置为XHTML Transitional。

我错过了什么?

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

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

当前回答

防止“Div父”使用“Div子”的边距: 在父级中使用这些css:

浮动填充边境溢出

其他回答

玩父母显示

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

.parent{ display: flex; }

是关于保证金崩溃的。

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

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

.child {
  display: inline-block;
}

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

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

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

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

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

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

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

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

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

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

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

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

.parent {
  display: flow-root;
}

推荐文章