标题！
段落
我有一个包含另一个 div（child）的 div（parent）。 Parent 是 body 中的第一个元素，没有特定的 CSS 样式。当我设置
.child
{
margin-top: 10px;
}
最终结果是我孩子的顶部仍然与父母对齐。我的父母没有将孩子向下移动 10 像素，而是向下移动了 10 像素。
我的 DOCTYPE 设置为 XHTML Transitional。
我在这里想念什么？
编辑 1 我的父母需要有严格定义的尺寸，因为它有一个必须从上到下显示的背景（像素完美）。所以在它上面设置垂直边距是不行的。
编辑 2 这种行为在 FF、IE 和 CR 上是相同的。
这种行为没有任何意义。保证金应该留在父级内部。不移动父级。谁写了这些规则。
+2 最后评论。严重的是，这条规则让我很恼火。 “每次都有 60% 的时间有效”——这就是利润。
我完全同意最后两位评论者的看法。疯了吧。有趣的是，为父级添加 1px 边框使其正常工作，但这意味着你有一个边框......如果这是预期的行为，那么这很荒谬
这也可能对您有所帮助 :) stackoverflow.com/questions/35337043/…
这让我想起了默认的 box-sizing 规则：“我们需要运送一个盒子。盒子不得大于 100 厘米。我们需要在盒子内留 10 厘米的填充物，以确保我们的内容在运输过程中不会损坏。让我们制作盒子120厘米！”真是笑话。
v
vdboor
在 Child elements with margins within DIVs 找到了替代方案您还可以添加：
.parent { overflow: auto; }
或者：
.parent { overflow: hidden; }
这可以防止到 collapse 的边距。边框和填充做同样的事情。因此，您还可以使用以下方法来防止上边距崩溃：
.parent {
padding-top: 1px;
margin-top: -1px;
}
2021 年更新：如果您愿意drop IE11 support，也可以使用新的 CSS 构造 display: flow-root。有关块格式化上下文的全部详细信息，请参见 MDN Web Docs。
应大众要求更新：折叠边距的全部意义在于处理文本内容。例如：
h1, h2, p, ul { margin-top: 1em;边距底部：1em；轮廓：1px 蓝色虚线； } div { 轮廓：1px 纯红色； }
标题！
标题！
段落
- 列表项
由于浏览器会折叠边距，因此文本会按您的预期显示，并且 <div> 包装标签不会影响边距。每个元素确保它周围有间距，但间距不会加倍。 <h2> 和 <p> 的边距不会相加，而是相互滑入（它们折叠）。 <p> 和 <ul> 元素也是如此。
可悲的是，对于现代设计，当您明确想要一个容器时，这个想法可能会咬住您。这在 CSS 语言中称为新的 block formatting context。 overflow 或边距技巧将为您提供。
B
Ben James
这是正常行为（至少在浏览器实现中）。边距不会影响子代相对于其父代的位置，除非父代有填充，在这种情况下，大多数浏览器会将子代的边距添加到父代的填充中。
要获得您想要的行为，您需要：
.child {
margin-top: 0;
}
.parent {
padding-top: 10px;
}
为父级添加边框也会影响子级的边距，请尝试
.parent {border: solid 1px;}
边距不会添加到填充中......它单独应用。但是视觉效果是一样的。
如果你想要一个最高利润怎么办……？不是真正的解决方案。
就像feeela 说的那样——如果需要最高边距，这并不是一个真正的解决方案。 vdboor 的答案更适合。
有很多解决方案，你只需要有足够的创造力。干杯。 :-)
E
Ejaz
尽管所有答案都解决了问题，但它们带有权衡/调整/妥协，例如
浮动，你必须浮动元素
border-top，这会将父元素向下推至少 1px，然后应该通过向父元素本身引入 -1px 边距来调整它。当父级已经具有相对单位的 margin-top 时，这可能会产生问题。
padding-top，效果和使用border-top一样
溢出：隐藏，当父级应该显示溢出内容时不能使用，如下拉菜单
溢出：自动，为具有（故意）溢出内容（如阴影或工具提示的三角形）的父元素引入滚动条
该问题可以通过使用 CSS3 伪元素来解决，如下所示
.parent::before {
clear: both;
content: "";
display: table;
margin-top: -1px;
height: 0;
}
https://jsfiddle.net/hLgbyax5/1/
margin-top: -1px 似乎是不必要的。但我喜欢这个。
实际上，
margin-top: -1px 和 height: 0 似乎都没有必要。在 Chrome 中测试。但最好的解决方案。
此方法主要工作，但不会尊重容器中最后一个元素的底部边距。溢出不是一个平等的解决方法：隐藏；例如。
@MichaelGiovanniPumo 可以使用
.parent:after... 修改答案以使用最后一个元素的底部边距
这绝对是当今最正确的答案。完美无瑕（前后都戴上），我希望人们敢于滚动过去！
C
Code Lღver
将样式 display:inline-block 添加到子元素
G
George SEDRA
父元素不能为空，至少将 放在子元素之前。
是的，有时只有这样才能有所帮助......或者更好地使用这样的内容：
e
erdomester
这对我有用
.parent {
padding-top: 1px;
margin-top: -1px;
}
.child {
margin-top:260px;
}
b
bingo
为了防止“div parent”使用“div child”的边距：在 parent 中使用这些 css：
漂浮
填充
边界
溢出
Y
Yeti
整洁的纯 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: hidden; 确保您永远不会看到修复。
您可能需要添加 line-height: 0px; 或 max-height: 0px; 以确保在古代 IE 浏览器中高度实际上为零（我不确定）。如果它不起作用，您可以选择在旧的 IE 浏览器中添加 <!--dummy-->。
简而言之，您可以仅使用 CSS 完成所有这些操作（无需向 HTML DOM-tree 添加实际的子节点）：
<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>
仅当您绝望时才使用此解决方案，并且您不能为现有元素设置任何自定义 CSS - 否则使用真正的解决方案：为父级设置
overflow: hidden;。
v
vincent thorpe
我发现，在你的 .css 中>如果你将 div 元素的 display 属性设置为 inline-block 它可以解决问题。并且保证金将按预期工作。
H
Hyzyr
玩父母的显示
.parent{
display: inline-block;
width: 100%;
}
或者
.parent{ display: flex; }
2
25thhour
.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 通常为 16 像素。通过在 #child 上设置超过 16 像素的 margin-top，您开始注意到它的位置移动。
Z
Zyl
我也有这个问题，但更喜欢防止负利润黑客，所以我放了一个
<div class="supercontainer"></div>
在它周围都有填充而不是边距。当然，这意味着更多的分裂症，但这可能是正确完成这项工作的最干净的方法。
s
schellmax
有趣的是，这里还没有提到我最喜欢的解决这个问题的方法：使用浮点数。
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;
S
SandRock
在我知道正确答案之前，我发现的另一种解决方案是为父元素添加透明边框。
你的盒子虽然会使用额外的像素......
.parent {
border:1px solid transparent;
}
l
lamplightdev
如果合适，使用 top 代替 margin-top 是另一种可能的解决方案。
关注公众号
不定期副业成功案例分享
<h2>、<p>、<ul>不会以这种方式出现奇怪的间隙或“双倍”边距。margin: 5px 10px;id 将 2 个 div 彼此相邻放置，则期望 2 个 div 距顶部 5 px，它们之间 20px，而不是距顶部 5 px 和它们之间 10px。如果我想要它们之间的 10 像素，则 id 已指定margin: 5px 5px;。老实说，我希望有一个可以阻止所有边距崩溃的根本规则。我讨厌我必须将纸上的边距大小加倍，才能让它们在屏幕上真正做我想做的事。而这个最重要的东西......真是一场灾难