span设为inline-block之后，未包含文字时下面会多出一条空白问题

Posted 2020-06-09

1.问题的引出：

产品列表页面场景：

上面是产品图片【img】，

中间是提示库存信息【span】（始终存在，有库存则不显示文字，但元素占位。所以设置display:inline-block），

下面是产品名称【div】。

效果如下：

我们发现，没有文字的时候，span元素下方会多一条空白。

将display设置为block，则不会出现此问题。

2.问题的解决：

span元素设置vertical-align值为baseline以外的值。

3.为什么这样解决：

兼容性问题！！！

专业描述：RD3020: 在不同的文档模式中，当唯一的非表单控件类行内替换元素存在于其包容块中时，其父框的行高并不一定会计算文本基线高度

见地址：http://w3help.org/zh-cn/causes/RD3020