After span is set to inline-block, why is there an extra blank when no text is included? -

0 reply content: laxatives
This is what it looks like.
Http://w3help.org/zh-cn/causes/RD3020 Why have I ever asked questions? The main cause of this problem is that the default vertical-align of the element is baseline. In the CSS Standard Visual formatting model details Vertical-align: baseline has the following description:

BaselineAlign the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

Because the location of the baseline of an element needs to be inferred based on the font information it uses (the text in a span may use different fonts due to different character sets ). Therefore, an inline-block with no content will have no baseline. Therefore, the baseline is aligned in the parent container as the baseline. The 3px in your example is the distance between the baseline edge.
Writing it here, I found that the baseline of the parent container cannot be counted. I don't know who can add it.
There are many ways to solve this problem: Set the vertical-align of span to bottom; or add a space for the span content;