1

Not sure about the title of the question. I have a span tag which is having padding-top somehow(tried to highlight in the screenshot below with black arrow), I am not sure how to remove it. I tried with line-height:100% but it also had some padding-top. Although the bottom border is perfectly fine.

span {
    background-color: red;
    color: yellow;
    border: 1px solid blue;
    font-size: 58px;
}

Fiddle

enter image description here

Thanks.

Shubh
  • 6,693
  • 9
  • 48
  • 83
  • Have you tried different browsers and fonts? – stevenw00 Jul 08 '15 at 10:07
  • I understand your explanation but why do you want to remove the gap? it actually comes by default. – Mr_Green Jul 08 '15 at 10:09
  • Yes. I did try that. Browser - IE 8, Mozilla and Font - Tahoma,Verdana. But it still shows same result. – Shubh Jul 08 '15 at 10:09
  • @Mr_Green: The reason for removing the gap is requirement driven where I need to calculate exact height of the span and do some manupulation. – Shubh Jul 08 '15 at 10:10
  • @Shubh there there is no need to do that. you can use `span.offsetHeight` to calculate the height using javascript. if you are talking about the height of the font, then it is `58px` as you mentioned in css. – Mr_Green Jul 08 '15 at 10:13
  • I suspect it's not padding, it's actually part of the character glyph so you probably can't remove it. – Paulie_D Jul 08 '15 at 10:13
  • It's natural glyph spacing as part of the font. Different fonts have different amounts of glyph spacing, so you could try another. You could also reduce the `line height`, but that may cut off the ends of some letters, e.g. g, y. – Paul Redmond Jul 08 '15 at 10:18

1 Answers1

0

That extra space above the text can be removed by the property line-height.

line-height: 0.5em;

See this fiddle

Here is the snippet.

span {
  background-color: red;
  color: yellow;
  border: 1px solid blue;
  font-size: 58px;
  line-height: 0.5em;
}
<span>Fylgpm</span>
Shrinivas Shukla
  • 4,325
  • 2
  • 21
  • 33
  • I'd recommend not using span since you want to control height. Try using div with { display:inline-block; line-height: 0.9em; height: 60px; } – Kurt Serge Jul 08 '15 at 10:22
  • Thank you @shrinivas, but the solution will cut the font when the `font-size` increases. [e.g.](http://jsfiddle.net/2z10r0j8/) – Shubh Jul 08 '15 at 10:24
  • 1
    See my comment above. Here is fiddle: http://jsfiddle.net/fj6peapk/1/ – Kurt Serge Jul 08 '15 at 10:33