Geek Answers Handbook

Additional pixels are added to the span element.

I can’t understand why, but two extra pixels are added to the height of the 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 debugger chrome tools, the range is 22 pixels long. If I change the test item to 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 violin with a span and div elements

Jsfiddle

+4
source share
1 answer

This happened because span- this is an element inline, and height- auto. For example, set the property displayto inline-block, and spantake exactly heightwhich you want to accept.

<div style="font-size:20px;line-height: 20px">
    test
</div>
    
<span style="display:inline-block;font-size:20px;line-height: 20px">
    test
</span>
Run codeHide result
+2
source

More articles:


All Articles