make text background colour fit text exactly, removing 'padding'

Question

I need to be able to create a background of black around this text that isn't padded on the top or bottom. Currently, the padding is at 0, but I need to be able to clip it somehow? What I mean is this is the current text:

And I need it to be like this:

I don't mind how this is achieved, so long as it can still have a transparent background above and below.

Current css is:

padding:0em 0.2em 0em 0.2em;
display:inline-block;
background-color:#000;
color:#FFF;

Thanks!

Answer 1

Add a line-height property that is something lower than 1.0em, for example:

line-height: 0.75em;

Note that this doesn't work on inline elements, so ensure that display is set to block or inline-block.

You may also need to fine-tune the vertical positioning using padding-top and/or padding-bottom, depending on the font that is used.

Answer 2

You need to have a line-height that is lower than the font-size:

padding:0em 0.2em 0em 0.2em;
display:inline-block;
background-color:#000;
color:#FFF;
font-size: 21px;
line-height: 15px;

Make sure display is block or inline-block.

MrSlayer just beat me to it!