Question

<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的margin-top上拉或下拉。 <p class="copyright">是一个单独的元素。知道为什么会出现这种间接影响吗？

Answer 1

我不确定没有测试用例，但这几乎肯定会在工作中“崩溃利润”：

某些相邻的边距合并形成一个边距。那些据说利润率会“崩溃”。如果没有，利润率就会相邻非空的内容，填充或边界区域或间隙分开它们。

规范：

一些更容易阅读：

Div的边缘影响另一个不相关的Div

1 个答案: