Why does changing font-size on a div change its height?

Question

I've got a structure that looks roughly like this:

• div (has font-size)
  • span (also has font-size, contains text)

Now, I'd think that the 2nd div would tightly wrap around the span. Their height would depend only on the span's font-size. However, if the div has its own font-size, it seems to contain some extra space, on top of the span itself.

Why is that?

.div {
  font-size: 25px;
  outline: 1px solid red;
}

.span {
  outline: 1px solid blue;
  font-size: 12px;
  /* The boxes are equal in size when this font-size is about 20px */
}

<div class="div"><span class="span">there!</span></div>

Codesandbox link.