html - 在不移动文本的情况下增加跨度上的填充

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 中单击以切换跨度，您可以看到所选文本，以及该行的其余文本，移动几个像素。

有什么方法可以让 span 的左端和右端与相邻的文本重叠？我希望能够在不让文本在屏幕上跳舞的情况下打开和关闭这些类型的亮点。

Answer 1

补偿负边距。

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

fiddle