div和img之间的空白间隔

问题描述：

        在开发过程中，想要做一个类似标签的东西，上方是图片，下方是文字描述，鼠标滑过，下方需要有一个滑过效果，滑过的时候，下方底色变蓝，这时候会发现，图片和文字描述中间有一个空白间隙，如下图。

<div class="jsfx_data_item" v-for="(item,index) in jsfxLists">
    <img :src="item.imgUrl" />
    <div class="jsfx_data_item_detail">
        <div>{
  {item.title}}</div>
    </div>
</div>

        F12对元素进行追踪，发现并没有任何设置的地方，平白多了几个像素的空白格，怎么也去不掉，使用margin-top设置负像素暂时解决问题，但是终究不是好办法。

原因：

        其实就是vertical-align和line-height的问题，这俩虽然没有设置，但是却是无处不在。

        vertical-align的默认值是baseline，默认与基线对齐，而在HTML5文档声明下，块状元素内部的内联元