Question

我无法弄清楚为什么只有2个额外的像素被添加到span元素的高度。这是一个例子：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span style="font-size:20px;line-height: 20px">
    test
</span>
</body>
</html>

在chrome调试工具中，span的高度为22像素。如果我将测试元素更改为div，则额外的像素会消失。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="font-size:20px;line-height: 20px">
    test
</div>
</body>
</html>

这里是span和div元素的小提琴

JSFiddle

Answer 1

之所以如此，是因为span是inline元素，而height设置为auto。例如，将display属性设置为inline-block，span将完全取消您想要的height。

<div style="font-size:20px;line-height: 20px">
    test
</div>
    
<span style="display:inline-block;font-size:20px;line-height: 20px">
    test
</span>

额外的像素被添加到span元素

JSFiddle

1 个答案: