After span is set to Inline-block, there is an extra blank question when there is no text included

1. The problem arises:

Product List page Scene:

Above is the product image "IMG",

The middle is the hint inventory information "span" (always present, there is no text displayed in inventory, but the element occupies a bit.) So set Display:inline-block),

Here is the product name "Div".

The effect is as follows:

We find that there is more space underneath the span element when there is no text.

This issue does not occur if display is set to block.

2. Resolution of the problem:

The span element sets a value other than baseline for the vertical-align value.

3. Why this solution:

Compatibility issues!!!

Professional Description: RD3020: In different document modes, when the unique non-form control class inline substitution element exists in its enclosing block, the row height of its parent box does not necessarily calculate the text baseline height

See Address: http://w3help.org/zh-cn/causes/RD3020

After span is set to Inline-block, there is an extra blank question when there is no text included