子元素的边距移动父元素
我有一个包含另一个div （ 子 ）的div （ 父 ）。 Parent是没有特别的CSS风格的第一个元素。 当我设置
.child { margin-top: 10px; }
最终的结果是，我的孩子的顶部仍然与父母alignment。 而不是孩子被向下移动10px，我的父母向下移动10px。
我的DOCTYPE被设置为XHTML Transitional 。
我在这里错过了什么？
编辑1
我的父母需要有严格定义的尺寸，因为它有一个背景，必须从上到下显示（像素完美）。 所以设置垂直边界是不行的 。
编辑2
这种行为在FF，IE和CR上都是一样的。
在DIV内的具有边距的子元素上find了一个替代方法您还可以添加：
.parent { overflow: auto; }
要么：
.parent { overflow: hidden; }
这可以防止边距崩溃 。 边框和填充也是这样做的。 因此，您还可以使用以下内容来防止出现顶部折叠：
.parent { padding-top: 1px; margin-top: -1px; }
更新stream行的请求：崩溃边缘的整个点处理文本内容。 例如：
<style type="text/css"> h1, h2, p, ul { margin-top: 1em; margin-bottom: 1em; } </style> <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>
由于浏览器折叠页边距，文本将显示为您所期望的，并且<div>包装标签不会影响页边距。 每个元素确保它具有间距，但间距不会加倍。 <h2>和<p>的边距不会相加，而是相互滑动（折叠）。 对于<p>和<ul>元素也是如此。
可悲的是，现代devise这个想法可以咬你当你明确要一个容器。 这在CSS中被称为新的块格式化上下文 。 overflow或保证金把戏会给你。
这是正常的行为（至less在浏览器实现中）。 保证金不会影响孩子相对于父母的地位，除非父母有填充，在这种情况下，大多数浏览器会将孩子的保证金添加到父母的填充。
要获得你想要的行为，你需要：
.child { margin-top: 0; } .parent { padding-top: 10px; }
尽pipe所有的答案都能解决这个问题，但是它们会带来诸如权衡/调整/妥协等
-
floats，你必须浮动元素 -
border-top，这会将父元素向下压至less1px，然后调整向父元素本身引入-1px边距。 当父母已经在相对单位中有margin-top时，这可能会产生问题。 -
padding-top，与使用border-top效果相同 -
overflow: hidden，当父级应显示溢出内容时，无法使用，如下拉菜单 -
overflow: auto，为父元素引入滚动条，该元素具有（故意）溢出的内容（如阴影或工具提示的三angular形）
这个问题可以通过使用CSS3伪元素来解决，如下所示
.parent::before { clear: both; content: ""; display: table; margin-top: -1px; height: 0; }
添加样式display:inline-block到子元素
父元素不得为空，至less要放入 在子元素之前。
这是为我工作
.parent { padding-top: 1px; margin-top: -1px; } .child { margin-top:260px; }
.child中包含的元素的.child正在崩溃。
<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上有一个超过16px的#child你会注意到它的位置移动。
我也有这个问题，但首选防止负利润黑客，所以我把一个
<div class="supercontainer"></div>
围绕这一切有填充而不是边距。 当然，这意味着更多的divitis，但它可能是最简洁的方法来做到这一点。
有趣的是我最喜欢的解决scheme，这个问题还没有在这里提到：使用浮动。
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
请注意，如果您需要父级的dynamic高度，则它也必须浮动，所以只需replaceheight:100px; 通过float:left;
我发现，在你的.css里面>如果你设置一个div元素的显示属性为内联块，它可以解决这个问题。 保证金将按预期工作。
如果合适，使用top代替margin-top是另一种可能的解决scheme。
在我知道正确的答案之前，我find了另一种解决scheme，即向父元素添加透明边框 。
你的盒子将使用额外的像素，但…
.parent { border:1px solid transparent; }
整洁的纯CSS解决scheme
使用下面的代码将无内容的第一个孩子添加到无意移动的div：
.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
这种方法的优点是不需要更改任何现有元素的CSS，因此对devise的影响最小。 接下来，添加的元素是一个伪元素，它不在 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>
您可以通过添加带有内容的子项（如简单空间）来解决此问题。 但是我们都讨厌为什么是devise问题增加空间。 因此，使用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树中添加实际的子元素）：
<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>
