Высота против стиля line-height

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

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

Спасибо!

Ответ 1

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

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

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

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

Ответ 2

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

Вот fiddle, который демонстрирует это.

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

высота= высота строки + padding-top + padding-bottom