Высота против стиля 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