CODEWITHSUNDEEP
htmlcsspadding
David Rea
David Rea

Reputation: 256

Increasing padding on a span without moving text

I want to jazz up a span to highlight text, including adding some padding, but without making any of the text in the div move around. It seems to work by default between lines (that is, the edge of my span overlaps the lines above and below) but not side to side.

Here's my .css:

.highlight {
    background:rgba(255, 255, 0, 0.5);
    font:Helvetica;
    padding:4px 6px 4px 6px;
    border:3px solid rgba(0, 0, 0, 0.5);
    border-radius:24px;
}

And here's the complete jsfiddle: http://jsfiddle.net/u2rksh9u/1/

If you click in the div to toggle the span you can see the selected text, and the rest of the text on the line, shift over a few pixels.

Any way to do it so the left and right ends of the span overlap adjacent text instead? I want to be able to pop these sorts of highlights on and off without having the text dance on the screen.

Upvotes: 0

Views: 2590

Answers (2)

OxyDesign
OxyDesign

Reputation: 754

http://jsfiddle.net/OxyDesign/s4xg9zmt/

You could compensate the difference (padding & borders) with negative left/right margins

CSS

margin:0 -9px;

Upvotes: 0

kornieff
kornieff

Reputation: 2557

Compensate with negative margins. 

.highlight {
    background:yellow;
    border: 2px solid red;   
    padding: 0.25em;
    margin: 0 calc(-0.25em - 2px);
}

fiddle

Upvotes: 3

Related Questions