html - 股利的边际影响另一个无关的股利

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

问题：


如果我在.footernote中放入边距底值，由于我在<footer>中放入边距底值，.footernote中的任何内容都会更改其位置。 footernote不在<footer>中，因此它们都是不同的元素。 <footer>的集合如何受到.footernote的影响？
当我更改页脚ul的上边距时，会出现相同的问题！版权声明生效，它根据页脚ul中的页边空白向上或向下拉。 <p class="copyright">是一个单独的元素。知道为什么会产生这种间接影响吗？

最佳答案

我不确定没有测试用例，但这几乎可以肯定是工作中的“崩溃边缘”：


  某些相邻的边距合并形成一个边距。那些
  边距被称为“折叠”。如果没有边距，则边距会相邻
  非空内容，填充或边框区域或清除权限
  他们。


规格：


http://www.w3.org/TR/CSS2/box.html#collapsing-margins
http://www.w3.org/TR/css3-box/#collapsing-margins


一些更容易阅读的内容：


http://reference.sitepoint.com/css/collapsingmargins
http://www.howtocreate.co.uk/tutorials/css/margincollapsing