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
1 answers
solution1
4 ACCPTED 2014-12-04 03:20:38
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery Add a span element within a paragraph element that is being added to the DOM
Extra pixels when element is inline
color isn't being added to the first span
Extra pixels added next to components (Airbnb mobile app)?
span content without an extra element tag
Extra margin being added for unknown reason
Extra folder layer being added to href?
Span element overflows when added dynamically
Span element drifts to the right by (0.25 x font-height) pixels
Extra padding added to table element in Outlook Windows
Related Tags