Html 嵌套的div和边距未按预期工作

我的页面顶部有一个

.header

div，里面有一个

.logo

div。我希望logo div有一个上边距，这样在页眉和logo的上边距之间有一些空间，但是当我添加

margin:15px auto时

到

.logo

，它的行为就像我将边距样式放在

.header

上一样。以下是一些示例代码：

html

我可以通过在

.header

上使用填充来获得所需的结果，但我只是好奇我的示例中的边距出了什么问题？同样奇怪的是，如果您取消注释我在

.header

中的边框css，它将按预期工作

使用FF和Chrome进行测试。

确保父级（标题）具有：

溢出：隐藏

溢出设置为“可见”以外的任何内容的元素（它们不会与其子元素一起折叠边距。）

将此CSS添加到
.logo
：

display: inline-block;

但是，这将使
.logo
向左对齐。您可以通过添加
text align:center到
.header
我对强制执行边距不太感兴趣，但为什么它不能正常工作。那么Riskbreaker的解决方案可能会更好地帮助您。谢谢。为什么我不能在没有溢出的情况下控制它：隐藏
？@Shreder查看CSS的框模型规范，这将帮助您理解它。还有，这是你发布的同一个问题：@disiforah。。。正在崩溃的利润率。谢谢你@Riskbreaker我编辑了你的问题，并解释了为什么
溢出：隐藏在父工程上，带有引用。希望你不介意。当然不是@shreader更具描述性对用户有利（Tron）：）
body {
    background-color: #CCC;
    margin: 0;
    padding: 0;
}

.header {
    height:80px;
    background-color: #8BB;
    margin: 0;
    /*padding: 15px 0 0;*/
    /*border: 1px solid yellow;*/
}

.logo {
    height: 30px;
    width: 500px;
    margin: 15px auto;
    background-color: #B5B;
    /*border: 1px solid red;*/
}

display: inline-block;