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

Question

我有一个 div（parent），其中包含另一个 div（child）。 Parent 是 body 中的第一个元素，没有特定的 CSS 样式。当我设置时，

.child
{
    margin-top: 10px;
}

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

我的 DOCTYPE 设置为 XHTML Transitional。

我在这里缺少什么？

编辑 1
我的父级需要有严格定义的尺寸，因为它有一个背景，必须从上到下显示在其下方（像素完美）。因此，在其上设置垂直边距是不行的。

编辑2
此行为在 FF、IE 和 CR 上都是相同的。

Answer 1

在 DIV 内具有边距的子元素找到了替代方案，您还可以添加：

.parent { overflow: auto; }

或：

.parent { overflow: hidden; }

这可以防止边距折叠。边框和内边距的作用相同。
因此，您还可以使用以下方法来防止顶部边距塌陷：

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

2021 更新：如果您愿意 放弃 IE11支持，您还可以使用新的CSS构造display: flow-root。有关块格式的完整详细信息，请参阅 MDN Web 文档上下文。

---

根据大众要求更新：
折叠边距的全部目的是处理文本内容。例如：

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 1px dashed blue;
}

div { outline: 1px solid red; }

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

由于浏览器会折叠边距，因此文本将按您的预期显示，并且

包装标记不会影响边距。每个元素确保其周围有间距，但间距不会加倍。

和

的边距不会相加，而是会滑入彼此（它们会折叠）。

和

元素也会发生同样的情况。

遗憾的是，在现代设计中，当您明确想要一个容器时，这个想法可能会困扰您。用 CSS 来说，这称为新的块格式化上下文。 overflow 或 margin 技巧将为您提供这一点。

Answer 2

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

为了获得您想要的行为，您需要：

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

Answer 3

尽管所有答案都解决了问题，但它们都伴随着权衡/调整/妥协，例如

• 浮动，您必须浮动元素
• border-top，这会将父元素向下推至少 1px，然后应通过向父元素本身引入 -1px 边距来进行调整。当父级已经具有相对单位的 margin-top 时，这可能会产生问题。
• padding-top，与使用border-top效果相同
• overflow：hidden，当父级应显示溢出内容时不能使用，例如下拉菜单
• overflow: auto，为具有（故意）溢出内容（如阴影或工具提示的三角形）的父元素引入滚动条

该问题可以通过使用 CSS3 伪元素来解决，如下所示

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

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

Answer 4

给子元素添加样式 display:inline-block

Answer 5

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

Answer 6

这对我有用

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

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

Answer 7

为了防止“Div Parent”使用“div Child”的边距：

在父级中使用这些CSS：

• Float
• Padding
• Border
• Overflow

Answer 8

简洁的纯 CSS 解决方案

使用以下代码将无内容的第一个子元素添加到无意移动的 div 之前：

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

此方法的优点是您不需要更改任何现有元素的 CSS，因此对设计的影响最小。接下来，添加的元素是伪元素，它不在 DOM 树中。

对伪元素的支持很广泛：Firefox 3+、Safari 3+、Chrome 3+、Opera 10+ 和 IE 8+。这适用于任何现代浏览器（请注意较新的 ::before，IE8 不支持它）。

上下文

如果元素的第一个子元素具有 margin-top，则父元素将调整其位置，作为折叠冗余边距的一种方式。为什么？就是这样。

考虑到以下问题：

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

您可以通过添加一个包含内容的子项来修复它，例如一个简单的空间。但我们都讨厌为纯设计问题添加空间。因此，请使用 white-space 属性来伪造内容。

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

其中 position:relative; 确保修复的正确定位。而且 white-space: pre; 使您无需在修复中添加任何内容（例如空格）。 height: 0px;width: 0px;overflow: hide; 确保您永远不会看到修复。

您可能需要添加 line-height: 0px; 或 max-height: 0px; 以确保在古老的 IE 浏览器中高度实际上为零（我不确定）。如果它不起作用，您可以选择在旧版 IE 浏览器中添加 。

简而言之，您只需使用 CSS 即可完成所有这些操作（这样就无需将实际的子级添加到 HTML DOM 树中）：

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>

Answer 9

这是关于边距折叠。

块的顶部和底部边距有时会合并（折叠）为单个边距，其大小是各个边距中最大的（或只是其中之一，如果它们相等），这种行为称为边距崩溃。

有多种解决方案，具体取决于具体情况。
一种解决方案是更改子级的显示模式。

.child {
  display: inline-block;
}

也很高兴知道。边距折叠不适用于 Flex 或 Grid 容器。

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

或者使用父级的 padding 而不是子级的 margin 。更改 overflow 或 float 属性也可能有所帮助。或绝对位置。这取决于你的布局。

Answer 10

我发现，
在 .css 内部 >如果将 div 元素的 display 属性 设置为 inline-block ，则可以解决问题。保证金将按预期发挥作用。

Answer 11

玩父母的展示

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

或

.parent{ display: flex; }

Answer 12

我也遇到了这个问题，但更喜欢防止负边距黑客攻击，所以我在它周围放置了一个

，

它有填充而不是边距。当然，这意味着更多的麻烦，但这可能是正确完成此操作的最干净的方法。

Answer 13

有趣的是，我最喜欢的解决这个问题的方法还没有在这里提到：使用浮动。

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; 替换为 float:left;

Answer 14

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

Answer 15

在我知道正确答案之前，我发现的另一个解决方案是向父元素添加透明边框。

不过你的盒子会使用额外的像素......

.parent {
    border:1px solid transparent;
}

Answer 16

您可以通过向父元素添加带有 display: flex; 的 :before 伪元素来解决此问题。

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

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

.parent {
  display: flow-root;
}

Answer 17

.child 中包含的元素的 margin 正在折叠。

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&</p>

    <div id="child">
        <p>&</p>    
    </div>

</div>
</body>
</html>

在此示例中，p 从浏览器默认样式接收margin。浏览器默认font-size通常为16px。通过在 #child 上设置超过 16 像素的 margin-top，您开始注意到它的位置移动。

Answer 18

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

但是负边框宽度呢？不起作用:(

但我们仍然可以通过 box-sizing 属性 来实现它
这迫使边框向负方向

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

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