增加跨度上的填充而不移动文本

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;