为什么选择文本时相邻的div之间有垂直间隙？

Question

我正在制作一个富文本编辑器，它类似于Google文档的克隆。出于某些原因，我将不介绍该内容，文本编辑器中的每一行都包装在其自己的div容器中。例如，如果有3行文本，则文本编辑器中将有3个子“行节点”（渲染为无样式的div）。并且在每个线节点中都有内联跨度元素来控制样式，例如粗体，斜体等。

<<

我遇到的问题是，当在多行中选择文本时，我不明白为什么每行之间会有空白的垂直间隙。我正在为此使用Draft.js，但从我的理解来看，它没有什么不同；没有应用样式或边距。我什至尝试使每行div及其跨度元素高度完全相同，但问题仍然存在。

我猜这是由某些本机浏览器行为引起的。我真正关心的只是：我可以“修复”它吗？我的意思是，我知道这是有可能的，因为Google Docs在选择文本时不会出现间距问题。但是，它再次使用了带有自定义光标的完全自定义渲染引擎。感谢您的任何建议

编辑：所以我发现一个临时的解决方法（请参见下图）是将每个div的高度和跨度减小到固定值（在这种情况下为height: 16.4px）。但是出于明显的原因，这不是理想的解决方案。我仍在寻找一种“适当的”方式来实现我想要的任何样式，并且在选择文本时在相邻的div之间不出现这些间隙。

我正在制作一个富文本编辑器，它类似于Google文档的克隆。出于某些原因，我将不介绍该内容，文本编辑器中的每一行都包装在其自己的div容器中。例如，如果有3 ...

[我相信您在谈论line-height，您可以在其中控制两个元素/文本之间的间距。

在下面尝试：

div {
  line-height:100px;
}

<div>Hello World!</div>

<div>How are ya?</div>

谢谢您的所有建议。事实证明，这是一个非常具有挑战性的问题，而且纯CSS几乎无法完成（如果有的话）。仅div或span元素的height属性似乎对文本选择有任何可见的影响。检查Google Docs元素会发现它们使用了自己的自定义选择引擎：
结束这一点，因为我至少知道现在如何实现解决方案，即使它非常复杂且耗时。再次感谢您的建议。

Answer 1

[我相信您在谈论line-height，您可以在其中控制两个元素/文本之间的间距。

Answer 2

谢谢您的所有建议。事实证明，这是一个非常具有挑战性的问题，而且纯CSS几乎无法完成（如果有的话）。仅div或span元素的height属性似乎对文本选择有任何可见的影响。检查Google Docs元素会发现它们使用了自己的自定义选择引擎：