Remove white space above and below large text in an inline-block element

Question

Say I have a single span element defined as an inline-block. It's only contents is plain text. When the font size is very large, you can clearly see how the browser adds a little padding above and below the text.

HTML:

CSS:

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
}

​

<span>BIG TEXT</span>

Looking at the box model, it's clear the browser is adding padding inside the content edge. I need to remove this "padding", one way is to simply alter the line-height, as with:

http://jsfiddle.net/7vNpJ/1/

This works great in Chrome but in Firefox the text is shifting towards the top (FF17, Chrome 23, Mac OSX).

Any idea of a cross-browser solution? Thanks!

Solution 1

It appears as though you need to explicitly set a font, and change the line-height and height as needed. Assuming 'Times New Roman' is your browser's default font:

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
  /*new:*/
  font-family: 'Times New Roman';
  line-height: 34px;
  height: 35px;
}

<span>
    BIG TEXT
</span>

Solution 2

The browser is not adding any padding. Instead, letters (even uppercase letters) are generally considerably smaller in the vertical direction than the height of the font, not to mention the line height, which is typically by default about 1.2 times the font height (font size).

There is no general solution to this because fonts are different. Even for fixed font size, the height of a letter varies by font. And uppercase letters need not have the same height in a font.

Practical solutions can be found by experimentation, but they are unavoidably font-dependent. You will need to set the line height essentially smaller than the font size. The following seems to yield the desired result in different browsers on Windows, for the Arial font:

span.foo
{
  display: inline-block;
  font-size: 50px;
  background-color: green;
  line-height: 0.75em;
  font-family: Arial;
}

span.bar
{
  position: relative;
  bottom: -0.02em;
}

<span class=foo><span class=bar>BIG TEXT</span></span>

The nested span elements are used to displace the text vertically. Otherwise, the text sits on the baseline, and under the baseline, there is room reserved for descenders (as in letters j and y).

If you look closely (with zooming), you will notice that there is very small space above and below most letters here. I have set things so that the letter “G” fits in. It extends vertically a bit farther than other uppercase letters because that way the letters look similar in height. There are similar issues with other letters, like “O”. And you need to tune the settings if you’ll need the letter “Q” since it has a descender that extends a bit below the baseline (in Arial). And of course, if you’ll ever need “É”, or almost any diacritic mark, you’re in trouble.

Solution 3

I'm a designer and our devs had this issue when dealing with Android initially, and our web devs are having the same problem. We found that the spacing between a line of text and another object (either a component like a button, or a separate line of text) that a design program spits out is incorrect. This is because the design program isn't accounting for diacritics when it is defining the "size" of a single line of text.

We ended up adding Êg to every line of text and manually creating spacers (little blue rectangles) that act as the "measurement" from the actual top of the text (ie, the top of the accent mark on the E) or from the descender (the bottom of a "g"). For example, say you have a really boring top navigation that is just a rectangle, and a headline beneath it. The design program will say that the space between the bottom of the top nav and the top of the headline textbox 24px. However, when you measure from the bottom of the nav to the top of an Ê accent mark, the spacing is actually 20px.

While I realize that this isn't a code solution, it should help explain the discrepancies between the design specs and what the build looks like.

Solution 4

span::before,
span::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
}

span::before{
    margin-top:-6px;
}

span::after{
    margin-bottom:-8px;
}

Find out the margin-top and margin-bottom negative margins with this tool: http://text-crop.eightshapes.com/

The tool also gives you SCSS, LESS and Stylus examples. You can read more about it here: https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce

Solution 5

I had a similar problem. As you increase the line-height the space above the text increases. It's not padding but it will affect the vertical space between content. I found that adding a -ve top margin seemed to do the trick. It had to be done for all of the different instances of line-height and it varies with font-family too. Maybe this is something which designers need to be more aware of when passing design requirements (?) So for a particular instance of font-family and line-height:

h1 {
    font-family: 'Garamond Premier Pro Regular';
    font-size: 24px;
    color: #001230;
    line-height: 29px;
    margin-top: -5px;    /* CORRECTION FOR LINE-HEIGHT */
}

View more solutions

Comments

[Keegan Crain]

I can't see the difference of the second fiddle between Firefox and Chrome.

[MusikAnimal]

Firefox 17, Chrome 23, Mac OSX

[Victor]

According to w3schools.com/cssref/pr_dim_line-height.asp, CSS line-height is fully compatible with Firefox.

[MusikAnimal]

Of course it is... that doesn't mean it renders the same. Also w3schools is a terrible resource, please see w3fools. I appreciate the help nonetheless

[watereffect]

I tried all the solutions mentioned above but none of them worked as I have to position the text at the bottom of the screen and the font itself was taking extra space. So, I added height, line-height and overflow hidden and it worked

[MusikAnimal]

Appears to have the same issue in Firefox, the text is cut off at the top

[karacas]

Perhaps the font in win is different from mac, try loading another font, example: jsfiddle.net/7vNpJ/18

[MusikAnimal]

Interesting, it appears as though setting a font, does, indeed, work! I'm guessing it's an issue with Times New Roman, luckily I'll be using Arial. Thanks!

[Jukka K. Korpela]

This heavily depends on the font: the font designer decides how tall the letters are with respect to the font size. Even with Arial as the font, my Firefox displays the sample text as partly cut off.

[MusikAnimal]

I was able to switch the font to Arial, and adjust the line-height and height to make it appear the same in both Chrome and FF. I have not tested such on Windows, however

[Julian F. Weinert]

Is there a similar simple solution for multi-line text containing divs?

[Kevin Lee]

Yeah, definitely check the line-height

[cytsunny]

This is not a working solution. You can see if small letter "gjy" is input, they overflow. jsfiddle.net/7vNpJ/665

[Homayoun Behzadian]

Answer says that problem is not solvable?

[mehov]

The ::before and ::after trick has helped, thank you.

[Toskan]

love the mention of Êg now things make more sense

[Alex Banman]

This solution is elegant and simple, works in a second. You will need to manually correct for smaller font sizes at smaller screen size queries but that doesn't take long to optimize.

[aequalsb]

over 20 years of web development and yet, today, this answered a perpetual question about line-height... that is... "yeah... but WHY???"... now i know! this is one of my all time favorite answers because it approached the answer, not so much with a direct solution, but with something more powerful: UNDERSTANDING.