为什么div继承sub div的属性？

Question

在我的网页的标题部分，设计类似徽标，导航div应与repeat-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那么标题div将位置从顶部移到50px。我希望实现像

这样的东西

标题div用于定义标题内容的高度。

我想在标题div中包含标题栏，并且标题div中包含的元素或div应该在标题内具有50px的边距。

例如，标题栏应该与标题div的顶部相距50px的边距。

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

希望我不要混淆你。

我哪里出错？

谢谢

编辑：如果我使用padding-top但使用repeat-x属性排除背景，它会起作用。

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

Answer 1

保证金不会影响元素相对于父母的位置。

要达到您想要的效果，您需要在#header上使用填充，例如：

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

Answer 2

如果你在#header div中添加“overflow：hidden”，它就像魅力一样！请注意，有填充，但也有边距。如果你删除填充，仍然会留下空间，这是边距！

Jsfiddle example here

Answer 3

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

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

Answer 4

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

如果您要在#header的顶部添加1px的填充，您将获得所需的效果：

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

Answer 5

我不确定我是否明白这个问题。

看起来像你的回答：link？