Menu
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
804
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
