altura vs línea-estilo de altura
¿Cuál es la diferencia entre usar 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 en lo que respecta a los elementos en la parte superior o en la parte inferior del elemento. ¿Por qué usar la altura de la línea si es así? La altura tendría más sentido de usar.
Edit: Un ejemplo de esto es un botón estilizado creado a partir de un div con texto dentro. Esto nunca será multilínea. Así que la altura de la línea sería necesaria para razones de compatibilidad? ¿o algo que no sepa?
Gracias!
5 answers
height es la medida vertical del contenedor.
line-height es la distancia desde la parte superior de la primera línea de texto a la parte superior
del segundo.
Si se usa con una sola línea de texto, esperaría que produjeran 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 redimensiona el texto.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-30 22:23:14
Si envuelve el texto en un div, dé al div una altura, y el texto crecerá hasta ser de 2 líneas (quizás porque se está viendo en una pantalla pequeña como un teléfono), entonces el texto se superpondrá con los elementos debajo de él. Por otro lado, si le das al div una altura de línea y el texto crece a 2 líneas, el div se expandirá (suponiendo que no le des también una altura al div).
Aquí hay un violín que demuestra esto.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-30 22:33:24
Para fines prácticos en el caso de que cite (nunca ajuste a más de una línea), la altura de la línea centrará verticalmente el texto. Sin embargo, tenga cuidado con esa suposición, ya que el usuario finalmente controla el tamaño de la fuente.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-30 22:22:30
Suponiendo que el texto es más pequeño que el contenedor:
Establecer la altura de línea en el contenedor especifica la altura mínima de los recuadros de línea dentro de él. Para 1 línea de texto, esto resulta en el texto centrado 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-03 12:40:16
Altura = line-height + padding-top + padding-bottom
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-28 21:19:44