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

<div class="logo fl clearfix">
			<h1><a href="">LOGO</a></h1>
		</div>

.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标签转换为块标签,则可以解决上面的问题.

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