Extra pixels are being added to span element

Question

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

You'll want to explain your question better. Let us know how your span element actually looks right now, where the extra pixels are located, etc. — Shawn Erquhart, Dec 04 '14 at 02:11
possible duplicate of [css - inline elements ignoring line-height](http://stackoverflow.com/questions/9609227/css-inline-elements-ignoring-line-height) — Shawn Erquhart, Dec 04 '14 at 02:13
The `span` is an inline element, so the browser will calculate height based on the size of the content. — Shawn Erquhart, Dec 04 '14 at 02:14
can you make a JSFiddle http://jsfiddle.net/ , it is easier for people to help you out. — Matilda Yi Pan, Dec 04 '14 at 02:21

score 5 · Accepted Answer · edited Nov 13 '16 at 05:49

5

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>

edited Nov 13 '16 at 05:49

Emile Bergeron

17,074
5
83
129

answered Dec 04 '14 at 03:20

potashin

44,205
11
83
107

Extra pixels are being added to span element

JSFiddle

1 Answers1

Linked