Question

见这个例子：

尝试拖动滑块，这会影响font-size元素上的canvas。但为什么绿色框上的line-height会发生变化？行高设置为像素。

Answer 1

<span>是inline元素。这些不受line-height的影响。

将<span>替换为<div> s或将CSS设置为display: block

在块级元素上，line-height属性指定   元素内线框的最小高度。

在未替换的内联元素上，line-height指定高度   用于计算线框高度。在替换内联元素这样的   作为按钮或其他输入元素，行高无效。

Answer 2

使用.box span作为块元素

.box span {
  font-size: 12px;
  line-height: 10px;
  display: block;
}