Почему при выделении текста существует вертикальный разрыв между соседними элементами?

Question

Я создаю текстовый редактор, похожий на клон Google Docs. По причинам, о которых я не буду здесь говорить, каждая строка в текстовом редакторе заключена в свой собственный контейнер div. Например, если есть 3 строки текста, в текстовом редакторе будет 3 дочерних «линейных узла» (представленных как не стилизованный элемент div). И внутри каждого линейного узла есть встроенные элементы span для контроля стиля, такие как полужирный шрифт, курсив и т. Д.

У меня проблема в том, что я не понимаю, почемуэто неприглядный вертикальный пробел между каждой строкой при выделении текста в несколько строк. Я использую Draft.js для этого, но из того, что я вижу, это не должно иметь значения;там не применяется стиль или поля. Я даже пытался сделать каждую строку div и ее элементы span одинаковой высоты, но проблема сохраняется.

Мне кажется, это вызвано некоторым поведением браузера. Все, что меня действительно волнует, так это: могу ли я это исправить? Я имею в виду, я знаю, что это возможно, потому что Google Docs не имеет этой проблемы с пробелами при выделении текста ... Но опять же, он использует полностью собственный движок рендеринга с пользовательскими курсорами тоже. Спасибо за любые предложения

edit: поэтому временный обходной путь, который я нашел (см. Изображение ниже), заключается в уменьшении высоты каждого div и span до фиксированного значения (в данном случае, height: 16.4px). Но по понятным причинам это не идеальное решение. Я все еще ищу «правильный» способ реализации любого стиля, который я хочу, и чтобы при выделении текста эти промежутки не появлялись между соседними элементами div

Answer 1

Спасибо за все предложения. Оказывается, это довольно сложная проблема, и очень мало (если вообще) можно сделать с помощью чистого CSS. Только атрибут height элементов div или span оказывает видимое влияние на выделение текста. Изучение элементов Документов Google показывает, что они используют свой собственный механизм выбора:

Закрытие, потому что я, по крайней мере, знаю, как решение может быть реализовано сейчас, даже если оно будет оченьсложный и трудоемкий. Еще раз спасибо за предложения.

Answer 2

Я полагаю, вы говорите о line-height, в котором вы можете контролировать пространство между двумя элементами / текстами.

Попробуйте это ниже:

div {
  line-height:100px;
}

<div>Hello World!</div>

<div>How are ya?</div>