Как я могу удалить пробел под японскими символами?

Question

У меня есть некоторый код здесь . Когда вы выделяете символ, под ним появляется большое пустое пространство, которое закрывает поле ввода, что означает, что трудно щелкнуть поле ввода. Эта проблема сохраняется, когда символ не выделен.

Я пробовал много методов, включая изменение высоты строки, изменение значений позиции, изменение высоты div, все безрезультатно.

Есть Есть ли способ уменьшить площадь символа?

Я сделал фрагмент кода, чтобы показать проблема здесь:

#character {
  height: 400px;
  font-size: 20em;
  position: absolute;
  background-color: beige;
}

#wrapper {
  position: relative;
  height: 400px;
 }

<div id="wrapper"><span id="character">い</span></div>
<span><input value="try to click me"></span>

Answer 1

CSS высота строки, проверьте, какую скрипку я вставил. убедитесь, что у вас нет переопределяющего правила css, которое идет вниз. При необходимости добавьте немного отступов для регулировки высоты строки.

#w_lineheight {
  padding-top: 4px;
  line-height: .9em; 
  background-color: #ccc; 
}

#no_lineheight {
  background-color: #bbb;
}

<div id="w_lineheight">
    あ	か ば	ぱ	ま	や	わ  ---- added lineheight of .9em
</div>
<div id="no_lineheight">
    さ	ざ	た	だ	な	は	ら  ---- No lineheight added here
</div>