dbosborne21 dbosborne21 - 1 year ago 52
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 Source

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>