Проблема с высотой строки и выравниванием

StackOverflow https://stackoverflow.com/questions/1803861

  •  05-07-2019
  •  | 
  •  

Вопрос

У меня есть элемент, и возможно, что он длиннее одной строки, поэтому мне нужно установить высоту строки > 1, в противном случае это выглядит дерьмово. Но если я это сделаю, строки будут выше, чем текст, и текст будет центрирован. Так что это не соответствует вершине. Как я могу изменить положение текста в верхней части строки или есть другой способ получить пробел между двумя строками?

Это было полезно?

Решение

Высота строки по определению центрирует размер шрифта в пределах данной высоты строки. Если у вас шрифт 12px и высота строки 16px, текст будет центрирован в пределах 16px, оставляя 2px сверху и снизу.

Одним из решений для увеличения этого текста при сохранении высоты строки является добавление отрицательного поля к элементу и его отрицательное увеличение: 

float: left;
margin-top: -2px;

Другие советы

Попробуйте это: 

<style type="text/css">
.spacer
{
 line-height:1px;
}

.spacer:after
{
 content:".";
 visibility:invisible;
 line-height:1px;
}
</style>

Вы можете увеличить высоту строки в приведенном выше CSS-коде и использовать ее следующим образом: 

your line one
<p class="spacer"></p>
your line two
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top