使用 CSS 在 <ins> 和 <del> 之间添加间隙答案

【问题标题】：Adding a gap between <ins> and <del> using CSS使用 CSS 在 <ins> 和 <del> 之间添加间隙
【发布时间】：2015-08-06 21:48:18
【问题描述】：

我正在使用htmldiff gem 输出两个输入值之间的差异字符串。

此输出使用<ins> 和<del> 标签的组合，以及.diffins、.diffmod 和.diffdel 类用于样式目的 - 到目前为止一切都很好，我可以在没有有什么问题。

好吧，几乎没问题，下面是一些示例输出：

Here is some text that <del class="diffmod">will be</del><ins class="diffmod">has</ins> changed.

这在大多数情况下都很好，除了 <del> 和 <ins> 之间没有差距，这可能是正确的，但在我看来并不正确。

我的问题是我正在尝试使用 CSS 来添加间隙，但结果并没有如我所愿。这是我目前所拥有的：

.diffins {
  color: green;
}

.diffmod {
  color: blue;
}

del.diffmod + ins.diffmod::before {
  content: ' ';
}

.diffdel {
  color: red;
}

这增加了一个间隙，但<ins> 标记的下划线样式延伸到::before 创建的空间。正如你在这里看到的：

我尝试添加text-decoration: overline;，但这不起作用。

有什么想法吗？干杯。

【问题讨论】：

padding-left: 5px;也许？
您不想使用填充，因为您想要空白的确切空间量？我想您可以随时编辑源代码以添加空间。为什么不直接删除 ins 标签上的 text-decoration 并将颜色设为蓝色？所以它根本不会有下划线
html 源代码由 gem 提供，我无法（也不想）更改。

【解决方案1】：

您可以通过使用 display 的 inline-block 并将其内容设置为 '\A0' 的 ::before 伪元素来调整边距或填充，而无需调整边距或填充 - 这是一个常规空间，但 @987654326 @ 单独似乎没有任何效果：

body {
  font: 32px/40px sans-serif;
}

del.diffmod + ins.diffmod::before {
  content: '\A0';
  display: inline-block;
}

This is the &lt;del class="diffmod"&gt;wrong&lt;/del&gt;&lt;ins class="diffmod"&gt;perfect&lt;/ins&gt; solution!

【讨论】：

我玩弄了使用margin-left，并且可能不得不这样做，但这个问题不是关于添加差距，而是更多关于覆盖<ins> 设置的值。另外，一旦开始更改字体大小，间隙的像素值就会搞砸，这就是我想使用content的原因。
您始终可以根据 em 单位设置边距大小，这将随字体大小缩放。
@SurrealDreams 无法使用 20px 字体不会为空白留出 20px 空间

【解决方案2】：

为什么不这样做

ins {
   text-decoration: none;
}

这将取消整个块的下划线，但我看不出它的真正用途，因为它已经是不同的颜色了

【讨论】：

我承认，我不喜欢使用下划线来突出插入，并且更喜欢像斜体这样的东西（虽然，我不确定这是否真的更好） - 但你可能会是的，虽然罢工足以显示已删除的文本，所以其余的颜色不同。
如果您真的想使用下划线，我认为其他答案会起作用。但老实说，我认为下划线是矫枉过正。一旦你去掉下划线，你当前使用的方法就可以用于空间

【解决方案3】：

在现有代码的基础上构建：

del.diffmod + ins.diffmod::before {
  content: '';
  display: inline-block;
  margin-left: .25em; /* approx 1 character */
}

没有要显示的实际内容（因此下划线/删除线），边距在em 中，因此会对字体大小的变化做出反应，

.diffmod {
  color: blue;
}

del.diffmod + ins.diffmod::before {
  content: '';
  display: inline-block;
  margin-left: .25em;
}

Here is some text that &lt;del class="diffmod"&gt;will be&lt;/del&gt;&lt;ins class="diffmod"&gt;has&lt;/ins&gt; changed.

【讨论】：