Высота и стиль линии

Question

Какая разница между использованием этих двух при работе с текстом, который никогда не будет больше, чем одна строка? Они оба могут давать схожие результаты на экране, что я вижу в отношении элементов сверху или снизу элемента. Зачем вообще использовать высоту строки, если так? Высота будет иметь больше смысла в использовании.

Edit: пример этой стилизованной кнопки, созданной из div с текстом внутри. Это никогда не будет многострочным. Так будет ли нужна высота строки по соображениям совместимости? или что-то, о чем я не знаю?

Спасибо!

Answer 1

height вертикальное измерение контейнера.

line-height расстояние от вершины первой строки текста до вершины второй.

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

я использую height когда я хочу явно установить размер контейнера и line-height для типографского макета, где это может иметь значение, если пользователь изменяет размер текста.

Answer 2

Если вы оберните текст в div, задайте высоту div, и текст вырастет до 2 строк (возможно, из-за того, что он просматривается на небольшом экране, например, в телефоне), тогда текст будет перекрываться с элементами под ним. С другой стороны, если вы дадите div высоту строки, а текст увеличится до 2 строк, div будет расширяться (при условии, что вы также не даете div высоту).

Вот скрипка, которая демонстрирует это.

Answer 3

Предполагая, что текст меньше контейнера:

Установка высоты строки на контейнере определяет минимальную высоту линейных блоков внутри него. Для 1 строки текста это приводит к тексту, вертикально центрированному внутри контейнера.

Если вы установите высоту для контейнера, то контейнер будет расти вертикально, но текст внутри него будет начинаться с первой (верхней) строки внутри него.

Answer 4

высота = высота строки + верхний отступ + нижний отступ

Answer 5

Легко понять, увидев этот пример.

.height
{
    height: 20px;
}

.lheight
{
    line-height: 15px;
}

.lheightbigger
{
    line-height: 35px;
}

<h2>Height</h2>
<div class="height">
  This is demo text. This is demo text.
  This is demo text. This is demo text. 
  This is demo text. This is demo text.
</div><br>
<h2>Line Height with less space</h2>
<div class="lheight">
  This is demo text showing line height example. This is demo text showing line height example.
  This is demo text showing line height example. This is demo text showing line height example.
  This is demo text showing line height example.This is demo text showing line height example.
</div>
<h2>Normal Text</h2>
<div>
  This is normal text.
  This is normal text.
  This is normal text.
</div>
<h2>Line Height with more space</h2>
<div class="lheightbigger">
  This is normal text. This is normal text.This is normal text.
  This is normal text. This is normal text.This is normal text.
  This is normal text. This is normal text.This is normal text.
</div>

Answer 6

Для практических целей в случае, если вы цитируете (никогда не переносите более чем на одну строку) высоту строки, текст по центру будет вертикально. Будьте осторожны с этим предположением, поскольку пользователь в конечном итоге контролирует размер шрифта.