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:

padded text

And I need it to be like this:

enter image description here

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!

I don't know, I just assumed it could, since negative margin works fine. I can be wrong, of course. — MightyPork, Jul 30 '13 at 13:48
This may sound silly, but have you considered using an image? Or does the text have to be dynamic? — UweB, Jul 30 '13 at 13:48
possible duplicate of [Remove white space above and below large text in an inline-block element](http://stackoverflow.com/questions/14061228/remove-white-space-above-and-below-large-text-in-an-inline-block-element) — isherwood, Jul 30 '13 at 13:50

jeffjenx · Accepted Answer · 2013-07-31T03:42:43.663

10

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.

edited Jul 31 '13 at 03:42

answered Jul 30 '13 at 13:47

jeffjenx

17,041
6
57
99

Chrome on a Mac. Positioning is off. – BenM Jul 30 '13 at 13:54
1

Works for me! Thank you, it was so simple, also worked out that if you use height and line height you can fine tune the position further – mbdavis Jul 30 '13 at 14:00
@BenM it works on Mac Chrome 28. I [updated your fiddle](http://jsfiddle.net/YHgWV/3/) by reducing the line-height to 0.60em and there is no black line across the bottom. Obviously, the line-height needs to be fine-tuned according to whatever font is used and even further tweaked with padding-top and padding-bottom. – jeffjenx Jul 31 '13 at 03:40

score 3 · Answer 2 · answered Jul 30 '13 at 13:51

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!

score 1 · Answer 3 · answered Jul 30 '13 at 13:54

1

Here is JSBin

Make your CSS as below

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

answered Jul 30 '13 at 13:54

Naveen Kumar Alone

7,536
5
36
57

score 1 · Answer 4 · answered Jul 30 '13 at 13:54

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;       
}

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

4 Answers4

CSS