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

Question

我有一个div（ 父 ）包含另一个div（ 子 ）。Parent是第一个body没有特定CSS样式的元素。当我设定

.child
{
    margin-top: 10px;
}

最终结果是我的孩子的顶部仍然与父母对齐。我的父母没有将孩子向下移动10px，而是将其向下移动10px。

我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或保证金招会给你的。