gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 04:19:57 24 4
gpt4 key购买 nike

我的页面顶部有一个 .header div,里面有一个 .logo div。我希望 Logo div 具有顶部边距,因此标题和 Logo 的顶部边框之间有一些空间,但是当我将 margin: 15px auto; 添加到 .logo 时,它的行为就像我将边距样式放在 .header 上一样。这是一些示例代码:

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 测试。

最佳答案

确保父级( header )具有:overflow: hidden;

Elements with overflow set to anything other than visible (They do not collapse margins with their children.)

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

关于html - 嵌套的 div 和边距未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19254134/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com