altura frente a estilo de altura de línea

Question

¿Cuál es la diferencia entre utilizar estos dos cuando se trata de texto que nunca será más de una sola línea? Ambos pueden producir resultados similares en la pantalla de lo que puedo ver con respecto a los elementos en la parte superior o en la parte inferior del elemento. ¿Por qué utilizar la altura de línea en absoluto? La altura tendría más sentido para su uso.

Editar: Un ejemplo de esto es un botón estilizado creado a partir de un div con texto dentro. Esto nunca será multilínea. Entonces, ¿se necesitaría una altura de línea por razones de compatibilidad? o algo que yo no sepa?

Gracias!

Answer 1

height es la medida vertical del contenedor.

line-height es la distancia desde la parte superior de la primera línea de texto hasta la parte superior de la segunda.

Si se utiliza con solo una línea de texto, espero que produzcan resultados similares en la mayoría de los casos.

utilizo height cuando quiero establecer explícitamente el tamaño del contenedor y line-height para el diseño tipográfico, donde podría ser relevante si el usuario cambia el tamaño del texto.

Answer 2

Para fines prácticos, en el caso que cita (nunca se ajusta a más de una línea), la altura de línea centrará verticalmente el texto. Tenga cuidado con esa suposición, ya que el usuario finalmente controla el tamaño de la fuente.

Answer 3

Si envuelve el texto en un div, le da al div una altura, y el texto crece a 2 líneas (tal vez porque se ve en una pantalla pequeña como un teléfono), entonces el texto se superpondrá con los elementos Por debajo de eso. Por otro lado, si le das a la div una altura de línea y el texto crece a 2 líneas, la div se expandirá (asumiendo que no le das una altura al div).

Aquí hay un fiddle que demuestra esto.

Answer 4

Suponiendo que el texto es más pequeño que el contenedor:

Ajuste de la línea de altura sobre el contenedor indica la altura mínima de la línea de cajas dentro de él. Para 1 línea de texto, esto hace que el texto se centre verticalmente dentro del contenedor.

Si establece la altura en el contenedor, entonces el contenedor crecerá verticalmente, pero el texto dentro de él comenzará en la primera línea (superior) dentro de él.

Answer 5

altura = line-height + padding-top + padding-bottom