跨度元素正在添加额外像素

Question

跨度元素正在添加额外像素

5

我不知道为什么，但是span元素的高度会多出2个像素。以下是一个例子：

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

在Chrome调试工具中，这个元素的高度为22像素。如果我把测试元素改成一个

元素，多余的像素就会消失。

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

这里是一个包含span和div元素的JSFiddle链接

JSFiddle

- dbosborne21

你需要更好地解释你的问题。让我们知道你的span元素实际上是什么样子，额外的像素位于哪里等等。 - Shawn Erquhart

3

可能是 css - inline 元素忽略 line-height 属性的重复问题。 - Shawn Erquhart

“span”是一个内联元素，因此浏览器将根据内容的大小来计算高度。 - Shawn Erquhart

你能否制作一个JSFiddle http://jsfiddle.net/，这样别人就更容易帮助你了。 - Matilda Yi Pan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- potashin · Accepted Answer

这种情况发生的原因是 span 是一个 inline 元素，且其 height 属性设置为 auto。可以将 display 属性设置为 inline-block，这样 span 就会占据您想要的确切高度。

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