div中嵌套img与span标签出现多处空问题

照片配文字展示的展示，前端页面出现下面这种情况

代码片段，使用vue的前端el-row与el-col标签页面布局

<el-col :span="16" class="demo-image">
  <div v-for="fit in fits" :key="fit" style="width:15%;height:120px;float:left;font-size:3;">
    <img :src="fit.url" style="width: 100px; height: 100px;vertical-align: middle;"><br />
    <span style="vertical-align: middle;display: inline-block;">{{ fit.imgName }}</span>
  </div>
</el-col>
    
<style>
.demo-image {
  float: right; // 不加这个属性，div会上下排布，除去浮动效果
  overflow-y: auto;  // 当展示图片列表过长，出现y轴方向滚动条
  height: 650px; // 不能以%代替，不然y轴的滚动条不能正常显示
  text-align: center; // 这是文字和照片在div中居中显示
  vertical-align: middle;
  width: 72%;
}
</style>

经过多次试验，问题出现在标签上，当span的文字过长，会自动换行，导致下方空档出现，修改文字长度就可以正常显示。
当然显示内容过长不我决定的，所以不能修改文字，尝试在div标签中加上了height属性后，出现多处空行的问题消失。