Make the text matching the color exactly matches the text by removing the 'padding'

Question

I need to create a black background around this text that does not fill at the top or bottom. Currently the padding is at 0, but do I need to pin it somehow? I mean, this is the current text:

And I need it to be like this:

I do not mind how this is achieved if it can still have a transparent background above and below.

Current css value:

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 below 1.0em, for example:

 line-height: 0.75em; 

Please note that this does not work with inline elements, so make sure the display parameter is set to block or inline-block .

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

Answer 2

You need to have a line height that is smaller 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 the display is a block or inline block.

MrSlayer just beat me!

Answer 3

Here is jsbin

Make your CSS below

 padding:0.2em 0.2em 0.2em 0.2em; display:inline-block; background-color:#000; color:#FFF; font-size:25px; line-height:8px 

Answer 4

How about this

Fiddle

 <div>Some text</div> 

CSS

 div { position: relative; display: inline-block; color:#fff; } div:before { content: ''; display: inline-block; margin: auto; background: #000; width: 100%; height: 68%; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -1; }