Parent element doesn't color the child's margin unless border is applied

Viewed 16

I have this simple code.

body {
  margin: 0;
  background: white;
}

div {
  background-color: red;
  /*   border: 2px solid black; */
}
<div>
  <p> hello </p>
</div>

The parent div element has a red background. Inside it is a p tag which obviously has a top margin. My understanding is that the child element has a transparent background and so the child element takes the parent's background color including its margin.

If I don't have a border around div element, p tag's margin doesn't get a red background color. But when there is a border it gets. Shouldn't the margin of the child element have the background red as well as the margin of p tag is considered inside the div element?

I have read about margin collapse. In this case, p tag has some default margin. But none of the elements apart from this have any margin. So I guess there is no margin collapse here.

Am I missing something here?

0 Answers
Related