嵌套的div和边距不能按预期工作

我有一个.header div位于我的页面顶部，并且其中有一个.logo div。我希望徽标div具有顶部边距，因此头部和徽标的顶部边框之间有一定的距离，但是当我将margin: 15px auto;添加到.logo时，它的行为就好像我将边缘样式放在.header上。下面是一些示例代码：嵌套的div和边距不能按预期工作

HTML

<body> 
    <div class="header"> 
     <div class="logo"></div> 
    </div> 
</body>

CSS

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;*/ 
}

jsfiddle

我能得到通过使用填充上.header而不是所期望的结果，但我只是好奇在我的例子中利润率出了什么问题？还有一点奇怪的是，如果您取消注册.header中的边框CSS，它将按预期工作。

使用FF和Chrome进行测试。

来源

2013-10-08 Nick Rolando

确保父（头）有：具有溢出设置为可见的任何其他overflow: hidden;

元素（他们不与子女崩溃边缘。）

http://reference.sitepoint.com/css/collapsingmargins

来源

2013-10-08 17:17:39 Riskbreaker

谢谢。为什么我没有'溢出：隐藏;'我没有控制它？ –

@Shredder查看CSS http://www.w3.org/TR/CSS2/box.html的框模型规范，这应该有助于你理解它。此外，这是你发布相同的问题：http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element – disinfor

@disinfor啊......崩溃的利润率。谢谢！ –

将此CSS添加到.logo：

display: inline-block;

但是，这将左对齐.logo。您可以通过将text-align: center;添加到.header

来源

2013-10-08 17:17:43 matewka

我并不是非常想强迫边界起作用，但为什么它不能正常工作。 –

然后可能Riskbreaker的解决方案将帮助你更好。 – matewka

嵌套的div和边距不能按预期工作

回答

相关问题