子元素的边距移动父元素

Question

子元素的边距移动父元素我有一个div (父母)包含另一个div (儿童)。父元素是body没有特别的CSS样式。当我开始.child {     margin-top: 10px; }最终的结果是，我的孩子的顶部仍然与父母保持一致。我的父母不是向下移动10 px，而是向下移动10 px。我的DOCTYPE设置为XHTML Transitional.我在这里错过了什么？编辑1我的父级需要严格定义尺寸，因为它有一个必须从上到下显示的背景(像素完美)。因此，在其上设置垂直边距是不去.编辑2这种行为在FF、IE以及CR上都是一样的。

Answer 1

找到了另一种选择在div中具有边距的子元素您还可以添加：

.parent { overflow: auto; }

或：

.parent { overflow: hidden; }

这将防止将页边距设置为塌陷..边框和填充物也是这样做的。因此，您还可以使用以下方法防止上限崩溃：

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

---

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

<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>元素。

可悲的是，在现代设计中，当你明确地想要一个容器时，这个想法会咬你。这叫做新的块格式上下文用CSS说。这个overflow或者毛边戏法会给你这个机会。

Answer 2

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

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

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}