在不移動文本的情況下增加間距的填充

Question

我想跨度增加文本的高亮度以突出顯示文本，包括添加一些填充，但不會使div中的任何文本四處移動。它似乎在默認情況下在兩行之間起作用（也就是說，我的跨度的邊緣與上下兩條線重疊），但不是左右擺動。

這裏是我的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; 
} 

而這裏的完整的jsfiddle： http://jsfiddle.net/u2rksh9u/1/

如果您在div點擊展開跨度，你可以看到所選文本，並在休息文字在線上，移動幾個像素。

任何方式來做到這一點，使跨度的左右兩端重疊相鄰的文字？我希望能夠在沒有文字在屏幕上跳舞的情況下打開和關閉這些高亮顯示。

Answer 1

補償負邊界。

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

fiddle

Answer 2

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

你可以補償的差額（填充&邊界）與負的左/右頁邊距

CSS

margin:0 -9px;