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!

Answer 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>