Div 的边距影响另一个不相关的 Div
<div class="footernote">
<p>
One statement ....
</p>
</div>
<footer>
<p>Current Visitors: 11</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<p class="copyright">copyright statement</a></p>
</footer>
CSS：
footer ul {
text-align: center;
margin-left: 90px;
margin-top: 18px;
}
footer ul li {
display: inline;
padding-right: 30px;
}
.copyright {
margin-left: 80px;
margin-top: 23px;
text-align: center;
font-size: small;
}
.footernote {
text-align: center;
}
问题：
如果我将 margin-bottom 值放入
.footernote中，当我更改页脚的 margin-top 时，也会出现同样的问题呃！版权声明生效，它根据我在页脚 ul 中放入的页边距顶部向上或向下拉动。
是一个单独的元素。知道为什么会发生这种间接影响吗？
<div class="footernote">
<p>
One statement ....
</p>
</div>
<footer>
<p>Current Visitors: 11</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<p class="copyright">copyright statement</a></p>
</footer>
CSS:
footer ul {
text-align: center;
margin-left: 90px;
margin-top: 18px;
}
footer ul li {
display: inline;
padding-right: 30px;
}
.copyright {
margin-left: 80px;
margin-top: 23px;
text-align: center;
font-size: small;
}
.footernote {
text-align: center;
}
Problem:
If i put margin-bottom value in
.footernote, whatever inside<footer>changes its position due to the margin-bottom value i put in.footernote. footernote is not in<footer>, so they are both different elements. How come the set of<footer>gets effected by.footernote?Same problem appears when i change margin-top of footer ul! Copyright statement gets effected, it pulls up or down based on margin-top i put in footer ul.
<p class="copyright">is a separate element. Any idea why does this indirect effect occur?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果没有测试用例，我不确定，但这几乎肯定是“利润崩溃”在起作用：
规范：
一些更简单的阅读：
I'm not certain without a test case, but this is almost certainly "collapsing margins" at work:
The spec:
Some easier reads: