css - 为什么以 px 为单位设置的 line-height 会受到父级字体大小的影响？

Question

我做了这个例子：http ://codepen.io/tomsoderlund/pen/JYJpPR来演示。

我正在使用以下方法font-size在父级 ( ) 上设置 (=size of 1 em) .canvas：

$('.canvas').css('font-size', emSize + 'px');

font-size和均以line-heightpx 为单位设置。font-size是（正确地）不受父母的 em 大小的影响，但是line-height是 - 为什么会这样？

Answer 1

line-height 仅适用于块级元素。您必须将 display:block 添加到您的跨度中。

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

在不可替换的内联元素上，line-height 指定用于计算行框高度的高度。在替换的内联元素（例如按钮或其他输入元素）上，行高无效。

MDN 行高