'border' makes 'background-color' works different

Question

This question seems not so significant as others but I'd like to understand how it works and why it works this way.

We have a very simple code pen here:

html, body {
  margin: 0;
  padding: 0;
}
.header {
  background-color: #ccc;
  /* border: 3px solid pink; */
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test1</title>
</head>
<body>
  <div class="header">
    <h1>Header</h1>
    <h2>Subheader</h2>
  </div>
</body>
</html>

When border is commented the pen works like this:

We can see that h1 and h2 margins are not colored by property 'background-color'. Here I thought that 'ok, it's because it's only what div.header contains.

But if we are removing comments and make a border for div.header it suddenly becomes behave different.

Now h1 and h2 margins became a part of div.header though border is only thing that changed. Can you help me explain this phenomenon. I know this has a logical explanation. Thank you very much.

score 8 · Accepted Answer · answered Mar 26 '21 at 17:37

The border doesn't have any (direct) effect on the background colour, it has an effect on the margins.

Without a border, the top and bottom margins of the child elements collapse through the edge of the element.

When you add a border, those margins stop at the border pushing the child elements away from it and increasing the size of the element inside the border (which is filled with the background colour).

See this article for further reading.

'border' makes 'background-color' works different

1 Answers1

Linked