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

Question

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

Answer 1

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

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

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

Answer 2

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

<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