Home/ Questions/Q 6936191
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T12:12:05+00:00

<div class=footernote> <p> One statement …. </p> </div> <footer> <p>Current Visitors: 11</p> <ul> <li><a

  • 0
<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:

  1. 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?

  2. 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not certain without a test case, but this is almost certainly “collapsing margins” at work:

    Certain adjoining margins combine to form a single margin. Those
    margins are said to “collapse.” Margins are adjoining if there are no
    nonempty content, padding or border areas or clearance to separate
    them.

    The spec:

    Some easier reads:

    • 0