为什么设置span的line-height属性无效？

给span设置 display:inline-block;。

原理

请参看这篇文章，解释了 什么是 Block box、Line box。
但是里面没有讲清楚为什么不能小于18px。这里有个解释 Height of an inline box

But using a font-size value of 15px doesn't mean that the tallest glyph will be 15px tall too. That depends on the font. This is somewhat analogous to normal, the initial value of line-height, which is defined as

Tells user agents to set the used value to a "reasonable" value based on the font of the element[...]. We recommend a used value for 'normal' between 1.0 to 1.2.

That means that, if you use font-size: 15px, a "reasonable" line-height would be between 15px and 18px. In the "Verdana" font, Firefox thinks the best is 18px; in the "sans-serif", it uses 17px.