How to remove vertical spacing in <span> element?

Question

How can I remove the vertical blank space from the top and bottom of this element? The text and text size are dynamic so I can't hard code a value in the css.

Thanks

Answer 1

You need to set the line-height smaller than the font-size. So if you have football declared in size 50px font, set the line-height to 40px. It will account for the spacing above and below the font chars.

p {
font-size: 50px;
background-color: red;
line-height: 40px;}

http://jsfiddle.net/nj6tzrnL/