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

Question

不知道为什么span 中line-height设置大小小于18px的话都是无效的
18之后才看到效果，不知道是怎么回事求大佬解答一下

http://codepen.io/1206189299/...

Answer 1

直接给答案：

给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.

Answer 2

line-height这个东西确实不好回答，我猜这个东西和你字体设置大小有关系。
引用MDN：
对于块级元素，CSS属性line-height指定了元素内部line-boxes的最小高度。
对于非替代行内元素，line-height用于计算line box的高度。

Answer 3

加上
display: block;

Answer 4

<span>是行内元素,用line-heigh需要把<span>变成块状元素用。加上楼上说的display: block;