在不移动文本的情况下增加跨度的填充答案

【问题标题】：Increasing padding on a span without moving text在不移动文本的情况下增加跨度的填充
【发布时间】：2014-09-23 16:55:33
【问题描述】：

我想增加一个跨度以突出显示文本，包括添加一些填充，但不让 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 的左右两端重叠相邻的文本？我希望能够在屏幕上没有文字跳舞的情况下打开和关闭这些类型的亮点。

【问题讨论】：

标签： html css padding

【解决方案1】：

用负边距补偿。

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

fiddle

【讨论】：

【解决方案2】：

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

您可以用负左/右边距补偿差异（填充和边框）

CSS

margin:0 -9px;

【讨论】：