Despite the perfect use of position offset, header grasps the top margin of main div. But a border t-CodePudding

My question title may seem a little bit weird. So let's have a brief.

Here I have a header with position: fixed. As it does not go with the normal flow of the window, a margin for the body is set to the height of the header(here 100px). Now, the body starts right after the bottom of the header.

The main div in the body has a margin-top of 50px. But the header grasps that margin and it's not shown. If I set a border on the body, then the margin is shown. I don't know what is the relation of that top margin with the border of the body.

This can be solved if I add 50px more to the margin-top of the main div. But I want to know what's happening here.

body {
  background-color: white;
  margin-top: 100px;
  /* border: 1px solid black;  */
}

header {
  background-color: black;
  height: 100px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
}

main {
  background-color: gray;
  margin-top: 50px;
  width: 100%;
  height: 100vh;
}

<header></header>
<main></main>

CodePudding user response：

Adding a border adjusts the display of the layout because the <body> and the <main> margins overlap without the border (since it's just whitespace), but with the border rendered, the two margins must be separate. Thus, without the border, the total margin is 100px, and with the border, the total margin is 150px.

See demo below. (I've also added a button to hide the <header> since it's position is fixed, so it isn't relevant to the situation.

const body = document.querySelector("body");
const header = document.querySelector("header");

const a = document.createElement("div");
const b1 = document.createElement("button");
b1.textContent = "Toggle body border";
b1.addEventListener("click", () => {
  if (body.style.border !== "1px solid red") {
    body.style.border = "1px solid red";
  } else {
    body.style.border = "none";
  }
});
const b2 = document.createElement("button");
b2.textContent = "Toggle body margin";
b2.addEventListener("click", () => {
  if (body.style.marginTop !== "0px") {
    body.style.marginTop = "0px";
  } else {
    body.style.marginTop = "100px";
  }
});
const b3 = document.createElement("button");
b3.textContent = "Toggle header visibility";
b3.addEventListener("click", () => {
  if (header.style.display !== "none") {
    header.style.display = "none";
  } else {
    header.style.display = "block";
  }
});
a.appendChild(b1);
a.appendChild(b2);
a.appendChild(b3);
a.style.position = "fixed";
a.style.top = "0";
a.style.zIndex = "2";

document.body.appendChild(a);

body {
  background-color: white;
  margin-top: 100px;
}

header {
  background-color: black;
  height: 100px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
}

main {
  background-color: gray;
  margin-top: 50px;
  width: 100%;
  height: 100vh;
}

<header></header>
<main></main>