0

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

enter image description here

Brett Hamlin
  • 264
  • 2
  • 4
  • 2
    Have you looked at http://stackoverflow.com/questions/26440174/how-to-remove-empty-space-in-top-bottom-of-span? – Hashem Qolami Oct 19 '14 at 21:01
  • 1
    What vertical blank space, inside the red area or the lines below it or what? Why not add an example instead of an image ? – adeneo Oct 19 '14 at 21:03
  • Thanks Hashem, yes, it is the same question but the answers all say to hard code a value for line-height. Is there any way to remove the vertical space in the red box without hardcoding a value? The text size dynamically changes so hard coding a value for line-height won't work. – Brett Hamlin Oct 19 '14 at 21:07
  • this is a element – Brett Hamlin Oct 19 '14 at 21:08
  • 1
    So why not change the line-height when the text-size is changed, and set it too dynamically ? – adeneo Oct 19 '14 at 21:09
  • but change it to what? it looks like line-height has to be a hard coded value. if set to the font size then it still has that spacing. – Brett Hamlin Oct 19 '14 at 21:22
  • @BrettHamlin You could try using `em` unit - as I've done - so that it would change with the respect to font-size. However the value may be different from font to font. – Hashem Qolami Oct 19 '14 at 21:25
  • @HashemQolami thanks, I'm using 0.8em, it seems to work for now but I'm weary of relying on a hard coded value. But if that's the only way to do it then it will have to do. Thanks everyone for you help. – Brett Hamlin Oct 19 '14 at 21:30
  • Can't think of any other way at the moment. Am not sure if there's any, though. – Hashem Qolami Oct 19 '14 at 21:33

1 Answers1

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/

vonnklaus
  • 21
  • 2