html - Why are there extra 2px added to the line-height of a block container that contains inline-elements?

Question

.link {
  background-color: red;
  font-size:16px;
}

.link span {
  background-color: royalblue;
  font-size:16px;
  line-height:16px;
}

<div class="link">
    <span>textg</span>
</div>

Answer 1

The line-height of the container should be size of the font-size, i.e. 16px

No it's not. You never set the line-height of the parent so the default value will apply which is around 1.2. It can be different in some case but for sure bigger than 1 in all the cases so bigger than the defined font-size

Set an explicit line-height and you will get what you want:

.link {
  background-color: red;
  font-size:16px;
  line-height:1; /* or any pixel value */
}

.link span {
  background-color: royalblue;
  font-size:16px;
}

<div class="link">
    <span>textg</span>
</div>