为什么 div 继承了 sub div 的属性？答案

【问题标题】：why is div inheriting the property of sub div?为什么 div 继承了 sub div 的属性？
【发布时间】：2011-04-25 21:27:59
【问题描述】：

在我网页的标题部分，设计类似于徽标和导航 div 应该与重复 x 图像（即 bg-header）重叠。

这是我用过的html

<div id="header">
    <div id="header-bar">
        <p>kljslakdjlaskjdkljasdlkjasdlkjaskldjasjd</p>
    </div>
</div>

这是css

#header {
    min-width: 1040px;
    height: 111px;
    position: relative;
}
#header-bar {
    margin-top:50px;
    height:53px;
}

现在在#header-bar 中，如果我给出margin-top:50px，那么header div 会将位置从顶部移到50px。我想实现类似

header div是定义header内容的高度。

我想将 header-bar 包裹在 header div 中，并且包裹在 header div 内的元素或 div 应该在 header 内有 50px 的边距。

例如，header-bar 应该距离 header div 的顶部有 50px 的边距。

当我使用上面的代码时，它也会移动标题 div 的位置。我希望标题 div 固定在顶部，只有标题 div 中的子 div 或内容是我想要定位的。

希望我没有让你感到困惑。

我哪里出错了？

谢谢

编辑：如果我使用 padding-top 但不包括具有 repeat-x 属性的背景，它会起作用。

我想用 repeat-x 属性移动图像。在 header-bg div 中

【问题讨论】：

标签： html css

【解决方案1】：

边距不影响元素相对于其父元素的位置。

要达到你想要的效果，需要在#header上使用padding，例如：

#header {
    min-width: 1040px;
    height: 61px;
    position: relative;
    padding-top: 50px;
}
#header-bar {
    height:53px;
}

【讨论】：

【解决方案2】：

如果您将“overflow:hidden”添加到#header div，它会像一个魅力一样工作！请注意，有填充，但也有边距。如果去掉padding，还是有空间的，就是margin！

【讨论】：

【解决方案3】：

在标题 div 上使用填充而不是边距。

#header {
    min-width: 1040px;
    height: 111px;
    padding:50px 0px 0px 0px;
}
#header-bar {
    height:53px;
}

【讨论】：

【解决方案4】：

您遇到了一个名为margin-collapse 的东西。本质上，相邻的边距会一起折叠，并且只显示较大的边距 - 即与 0 的绝对距离更大的边距。由于您的 #header 边距（0px）与您的 #header-bar 边距（50px）相邻，因此50px 边距是显示的边距，它会影响您的两个元素。

如果您要在#header 的顶部添加 1px 的内边距，您会得到想要的效果：

#header {
    min-width: 1040px;
    height: 111px;
    position: relative;
    padding-top: 1px;
}

【讨论】：

【解决方案5】：

我不确定我是否理解了这个问题。

你的答案看起来像吗：link？

【讨论】：