为什么内联元素的包装器有奇怪的垂直空白？

Question

我正在使用位于一行中的菜单项进行导航：

<div class="wrapper">
  <div class="tt-inl-wrap">

     <a class="tt-inl-bl" href="/">Home</a>
     <a class="tt-inl-bl" href="/">Club</a>          

  </div>
</div>

这是css：

.wrapper { width: 100%; max-width: 1240px; min-width: 350px; padding: 0 30px; margin: 0 auto; }

.tt-inl-wrap { font-size:0px !important; }
.tt-inl-wrap > * { font-size:initial; }
.tt-inl-bl { display:inline-block; }

正如您所看到的，我将内联元素（.tt-inl-wrap）的包装器的字体大小设置为0px，以消除内联项之间的水平空格。但是.tt-inl-wrap元素底部还有一个无法解释的垂直空白区域（内联元素高度为50px，而包装器有55px），请参见图像：

我之前已经多次看到过这种奇怪的内联元素包装的垂直景观，但从未了解过原因。

这个垂直空白是否有解释？