54 replies

Why parent inline element have grater height, than the content it contains?

I have the following code:

<a>
  <span style="
      line-height: 16px;
      display: inline-block;"
  >test</span>
</a>

<a>
  <span style="
      line-height: 16px;
      display: inline-block;"
  >test</span>
</a>

<a>
  <span style="
      line-height: 16px;
      display: inline-block;"
  >test</span>
</a>

<a>
  <span style="
      line-height: 16px;
      display: inline-block;"
  >test</span>
</a>

Why

tag has a height of 18.5px instead of 16px?

span

span

span

span has the height of

16px

16px

16px

16px, and I thought and expect the container to also be the height the size of the content (16px)

But for some reason,

tag is bigger, than the content. Why does it happen?