Altura De Línea Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | |

La propiedad de altura de lìnea de CSS determina la altura de lìnea de diferentes elementos HTML. Se usa com√∫nmente para establecer la distancia entre lìneas de texto. La altura de una lìnea se puede establecer mediante palabras clave, porcentajes o valores numéricos.

La propiedad de altura de lìnea de CSS permite a los desarrolladores definir el espacio entre dos elementos en lìnea en una página web. Los desarrolladores a menudo usan la propiedad de altura de lìnea de CSS para aumentar o disminuir la distancia entre lìneas de texto en una página web.

Este tutorial discutirá còmo usar la propiedad de altura de lìnea de CSS. Nos referiremos a un ejemplo para ayudarlo a comenzar. Al final de la lectura de este tutorial, serás un maestro en el uso de la propiedad line-height en tu còdigo.

CSS line-height

Los conjuntos de propiedades de CSS line-height la altura de una caja de lìnea. Los cuadros de lìnea son las lìneas que forman un cuadro en CSS . Este método se usa a menudo para establecer la distancia entre lìneas de texto.

Un ajuste de la altura de la lìnea le permite ajustar indirectamente el espaciado entre lìneas de texto (u otros elementos) en una página web. Esto es muy parecido a formatear el texto en Microsoft Word para que esté a doble espacio o 1,15.

La sintaxis de la propiedad de altura de lìnea de CSS es la siguiente:

" lineHeight " se refiere a un valor de longitud que establece la altura de lìnea de un elemento.

Tres tipos de valores que puede usar con la propiedad line-height son longitud, n√∫mero y porcentaje:

Valor Descripciòn Valores de ejemplo Resultado de & nbsp; Valores de ejemplo
Longitud Establece la altura de la lìnea utilizando una unidad de medida especìfica (como em, px y cm). 10px, 15px, 20px Si especifica 10px, la altura de la lìnea será 10px.
N√∫mero Establece la altura de la lìnea para que sea igual a un m√∫ltiplo del tama√±o de fuente. & nbsp; 1, 1.8, 2 Si su tama√±o de fuente es 10px, la altura de su lìnea será 10px, 18px y 20px, respectivamente. < / tr>
Porcentaje Establece la altura de la lìnea como un porcentaje del tama√±o de fuente del elemento. 30%, 50% , 110% Si su tama√±o de fuente es 10px, la altura de su lìnea será de 3px, 5px y 11px respectivamente.

Como alternativa, puede especificar la palabra clave " normal & rdquo ;. Esta palabra clave especifica el uso del navegador predeterminado. Este valor suele ser de alrededor de 1,2, seg√∫n el navegador que el visor está usando.

Si aplica la propiedad line-height a un cuadro, todo el texto dentro de ese cuadro utilizará la altura de lìnea que ha especificado.

Una nota sobre accesibilidad

Cambiar el espaciado entre lìneas es un uso com√∫n de la propiedad line-height. Esto se debe a que siempre desea asegurarse de que haya suficiente espacio entre lìneas. Si no hay suficiente espacio entre lìneas, el texto puede ser difìcil de leer.

El texto que es difìcil de leer tiene un efecto particularmente grave en las personas con discapacidad visual. La accesibilidad siempre debe ser una consideraciòn cuando se crea un sitio web.

Cuando usted " estás usando un n√∫mero para establecer la altura de lìnea de un elemento en CSS, no debe utilizar valores inferiores a 1,5. Esto se debe a que los valores inferiores a 1,5 para la altura de la lìnea pueden dificultar el uso de su sitio web para los lectores con discapacidad visual.

Ejemplo de CSS de altura de lìnea

Suponga que estamos dise√±ando un & ldquo ; Acerca de nosotros " página del sitio web de un club de cocina local. La página contiene un encabezado seguido de un párrafo de texto que describe una descripciòn del club.

Queremos que nuestro texto esté correctamente espaciado. Entonces, decidimos establecer la altura de lìnea del párrafo de texto en la página web en 1.6rem. Podemos hacerlo usando este còdigo:

Nuestro còdigo devuelve: Haga clic en & nbsp; ’Imagen botòn en el editor de còdigo de arriba para ver el resultado de nuestro còdigo HTML / CSS.

En nuestro archivo HTML, definimos un " Acerca de nosotros " encabezado con "h2" etiqueta. Luego, escribimos una descripciòn de Fantastic Chefs y la adjuntamos dentro de HTML "p" etiquetas .

En nuestro archivo CSS, definimos una regla. Nuestra regla utiliza dos propiedades CSS. Establecemos la altura de la lìnea en 1.6rem y el tama√±o de fuente en 16px para todas las etiquetas HTML "p"

La unidad de medida " rem " que usamos con la propiedad line-height establece una altura de lìnea relativa al tama√±o de fuente del elemento raìz. " rem " significa " elemento raìz. El tama√±o de fuente era de 16 px, la altura de nuestra lìnea para este párrafo de texto era de 25,6 px (16 px * 1.6).

El texto del párrafo anterior está adecuadamente espaciado y no se superpone.

También podrìamos aplicar nuestra altura de lìnea a nuestro elemento "div" en el ejemplo anterior. Esto establecerìa la altura de lìnea para todo el texto en nuestra etiqueta "div" a los valores que especificamos. Esto significarìa que tanto nuestro title y nuestra etiqueta "p" se verìa afectada.

Conclusiòn

El CSS line-hei La propiedad ght establece la altura de un cuadro de lìnea. Por lo general, esta propiedad se usa para establecer el espacio entre lìneas de texto en un párrafo o encabezado. La altura de lìnea se puede establecer usando la palabra clave normal, un porcentaje, una longitud o un valor numérico.

Este tutorial trata los conceptos básicos de la propiedad de altura de lìnea de CSS y còmo puede usarla en su còdigo. ¬°Ahora tiene el conocimiento que necesita para comenzar a usar la propiedad de altura de lìnea CSS como un experto!

¿Está buscando convertirse en desarrollador web? Consulte nuestra guìa de còmo aprender CSS para obtener consejos de expertos y orientaciòn sobre los principales cursos y recursos de aprendizaje.