Why does div change size when I add a border

Question

There's not much to explain, just take a look.

Div No Border:

p {
  background-color: blue;
  border-style: solid;
}

div {
  background-color: red;
}

<div>
  <p>p text</p>
</div>

Output:

Div Border:

p {
  background-color: blue;
  border-style: solid;
}

div {
  background-color: red;
  border-style: solid;
}

<div>
  <p>p text</p>
</div>

Output:

Why does the red div increase its height when a border is added to it?