html - Impact of border property on top margin

Question

Refer to the following code:

body {
  height: 500px;
  width: 80%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background-color: lightgray;
}
.header {
  width: 80%;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: yellow;
  /* border: solid 1px black; */
}

<div class="header">
  <ul>
    <li><a href="index.html">Dashboard</a></li>
  </ul>
</div>

Answer 1

This is due to margin collapsing (MDN, W3.org).

In your example the header element contains an unordered list which, by default, has a top and bottom margin. Because of border collapsing, its margin is transferred to the header which in turn is transferred to the body. As a result, the body is pushed down while the header and list aligns with the top of body.

Adding a border is one method to prevent margin collapsing (see W3 specs). If you want to avoid adding a border, use the other methods such as assign overflow: hidden to the header.

body {
  height: 500px;
  width: 80%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background-color: lightgray;
}
.header {
  width: 80%;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: yellow;
  /*border: solid 1px black;  */
  overflow: hidden;
}

<div class="header">
  <ul>
    <li><a href="index.html">Dashboard</a></li>
  </ul>
</div>