1

I'm having a bit of trouble with a large gap between the top and bottom of a DIV when adding text. It looks like it's the calculated height of the text but why is it out so much? Ideally I need it to be as flush as possible to the border.

I've created a simple fiddle to demonstrate this http://jsfiddle.net/XFqq5/3/

CSS

#text {
 display: inline-block;
 font-size: 70px;
 border: 1px solid red;
 line-height: 1;
}

HTML

<div id="text">test</div>
jamiers
  • 65
  • 5
  • Try lowering the line-height. What you're seeing is normal, it's the space that would be filled if you had capital letters. – joakimdahlstrom May 02 '14 at 09:42
  • possible duplicate http://stackoverflow.com/questions/15161385/how-to-get-the-real-height-of-a-text – PA. May 02 '14 at 09:51

1 Answers1

8

It's a combination of:

  • You aren't using the tallest or lowest glyphs in the font (type a capital letter and one with a descender such as g or y) and
  • There's no rule which says the glyphs have to stretch the entire height of the font
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    The problem is it could be one of several fonts chosen by a user and not necessarily include letters of the tallest or lowest glyphs but I need to it the border to be as accurate as possible. How would I force a rule using JS or other means to stretch it only to the letters I have in there? – jamiers May 02 '14 at 09:47
  • 1
    Maybe render it in a `` and then measure pixel colours before drawing the border. – Quentin May 02 '14 at 09:51
  • 1
    I got it to work in the end using canvas and measuring the pixel colours as you suggested which ended up being fairly accurate, I will accept your answer cheers for your help. Even when I was using the tallest glyphs it was still wrong infact some of the descenders they were even peeping out the border. – jamiers May 02 '14 at 16:07