为子元素添加样式显示:inline-block

纯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>

您可以通过添加带有内容(例如简单空格)的子元素来修复它。但我们都不喜欢为设计问题添加空格。因此，可以使用空白属性来伪造内容。

<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>

其中位置:相对;确保固定的正确位置。和空格:pre;使您不必添加任何内容-如空白-到修复。和高度:0px;宽度:0px;溢出:隐藏;确保你永远都看不到解决办法。

你可能需要添加line-height: 0px;或者max-height: 0px;以确保高度实际上是零在古老的IE浏览器(我不确定)。还可以添加<!——dummy——>到旧的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>

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

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

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

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

是关于保证金崩溃的。

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

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

.child {
  display: inline-block;
}

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

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

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

虽然所有的答案都解决了问题，但它们都伴随着权衡/调整/妥协，比如

floats, You have to float elements border-top, This pushes the parent at least 1px downwards which should then be adjusted with introducing -1px margin to the parent element itself. This can create problems when parent already has margin-top in relative units. padding-top, same effect as using border-top overflow: hidden, Can't be used when parent should display overflowing content, like a drop down menu overflow: auto, Introduces scrollbars for parent element that has (intentionally) overflowing content (like shadows or tool tip's triangle)

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

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

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