问题
I can't figure out why but 2 extra pixels are added to the height of a span element. Here is an example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span style="font-size:20px;line-height: 20px">
test
</span>
</body>
</html>
In chrome debugger tools the span has a height of 22 pixels. If I change the test element to a div the extra pixels go away.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="font-size:20px;line-height: 20px">
test
</div>
</body>
</html>
here is a fiddle with the span and the div elements
JSFiddle
回答1:
It happened, because span is an inline element and it's height is set to auto. Set display property to inline-block, for example, and span will take exactly the height you want it to take.
<div style="font-size:20px;line-height: 20px">
test
</div>
<span style="display:inline-block;font-size:20px;line-height: 20px">
test
</span>来源：https://stackoverflow.com/questions/27285053/extra-pixels-are-being-added-to-span-element