CSS：父元素的页边空白不会影响孩子的页边空白
[英]CSS: Parent element's margin-top doesn't affect child's margin-top
问题描述
很简单，我无法解决。 看下面的代码； 在我的盒子模型的理解，对60像素保证金#content应该推动整个.main的div失望的， .main div的保证金应该开始60像素下来的页面，但在实践中.main缘与重叠#content保证金（ 这是一个Codepen ）
<head>
<style>
#content{
margin-top:60px;
}
.main{
margin-top:20px;
}
</style>
</head>
<body>
<section id="content">
<div class="main">
<h1>Here's some content</h1>
</div>
</section>
</body>
为什么会这样呢？
编辑：还有什么建议的解决方案？ 注意，将overflow:hidden添加到父元素是一种解决方案，但这不是适当的解决方案； 如果我在.main内放入h1并尝试在其上设置最高利润， .main发生相同的问题-并且我不想对所有内容都使用overflow:hidden ！
3 个解决方案
解决方案1
1 2015-09-13 07:45:54
这是因为利润下降，您可以在此处阅读。
解决方案2
0 2015-09-13 07:51:00
发生这种情况是因为您尚未指定内容div的高度。 因此，当您在#content div中输入.main之类的内容时，内容div将占据.main div的高度，因为这是内容所需要的。
因此，请弄清楚一点，如果.main div的高度为50px，则#content的高度也仅为50px，因为您没有另外指定。 因此.main div的margin-top与#content的.margin-top崩溃了。
解决方案3
0 2015-09-13 07:52:25
这是根据w3c（ 参考 ）的盒子模型的默认行为。
现在要克服这个问题，您需要按如下所示浮动元素
#content {
margin-top: 20px;
float: left;
width: 100%;
}
.main{
float: left;
width: 100%;
margin-top: 40px;
}
CSS边距顶部移动父元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.