dbosborne21 dbosborne21 - 25 days ago 7
CSS Question

Extra pixels are being added to span element

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


Answer

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>