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

Question

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

.child
{
    margin-top: 10px;
}

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

我的目标DOCTYPE是XHTML Transitional.

我在这里错过了什么？

编辑1
我的父母需要有严格定义的尺寸,因为它的背景必须从上到下显示在它下面(像素完美).因此,设置垂直边距是不行的.

编辑2
此行为在FF,IE和CR上是相同的.

Answer 1

在DIV中具有边距的Child元素中找到替代方法您还可以添加:

.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;
}

Answer 3

虽然所有的答案都解决了这个问题,但它们会带来权衡/调整/妥协等

• floats,你必须浮动元素
• border-top,这会向父母推送至少1px向下,然后应该通过-1px向父元素本身引入边距来调整.当父母已经拥有margin-top相对单位时,这可能会产生问题.
• padding-top,与使用相同的效果 border-top
• overflow: hidden,当父级应显示溢出内容时,不能使用,如下拉菜单
• overflow: auto,为父元素引入滚动条,该元素具有(有意)溢出的内容(如阴影或工具提示的三角形)

可以使用CSS3伪元素解决此问题,如下所示

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

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

Answer 4

display:inline-block为child元素添加样式

Answer 5

父元素不能为空,至少放在 子元素之前.

Answer 6

这对我有用

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

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

Answer 7

为了防止“div parent”使用“div child”的边距：
在父级中使用这些css：

• 漂浮
• 填充
• 边界
• 溢出