问题

我有一个div(父),其中包含另一个div(子).父是body中的第一个元素,没有特定的CSS样式.当我设置时

 .child
{
    margin-top: 10px;
}
 

最终结果是我的孩子的顶部仍然与父级对齐.而不是将孩子向下移动10px,我的父母向下移动10px.

我的DOCTYPE设置为XHTML Transitional.

我在这里错过了什么?

编辑1
2001年12月31日终了的两年期收入和支出及准备金和基金结余变动报表 我的父母需要有严格定义的维度,因为它有一个背景,必须从上到下显示(像素完美).所以在它上设置垂直边距是没有的.

编辑2
2001年12月31日终了的两年期收入和支出及准备金和基金结余变动报表 这种行为在 FF、IE 和 CR 上是一样的。

  最佳答案

Child元素中找到一个在DIVs 中具有边距的替代方案,您也可以添加:

 .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或边距技巧会给你这个.

  相同标签的其他问题

cssxhtmlmarginnested