HTML学习过程中发现背景图向下掉的情况

LOGO .fl{float: left;}/* 左浮动 */.clearfix::before,.clearfix::after{content: "

LOGO

.fl{float: left;
}
/* 左浮动 */.clearfix::before,
.clearfix::after{content: "";display: table;
}
.clearfix::after{clear: both;
}.header .logo h1 a{display: inline-block;width: 207px;height: 70px;background-image: url(../images/logo.png);background-size: 100%;font-size: 0;/* 让背景图上面的文字隐藏掉 */
}

关键代码如上

结果如图:

如果把相关的a标签转换为块标签,则可以解决上面的问题.

问题在于:为什么不能设置为行内块标签呢?为什么设置为行内块标签会出现这个异常现象?