CSS: propiedad de altura de línea

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedad de altura de línea

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada Altura de la línea Con sintaxis y ejemplos.

describir

La propiedad line-height de CSS define la altura utilizada para calcular la altura del cuadro de línea de los elementos en línea y define la altura mínima del cuadro de línea de los elementos a nivel de bloque.

sintaxis

La sintaxis de la propiedad CSS de altura de línea es:

line-height: value;

parámetro o parámetro

valor

La altura utilizada para calcular la altura de la estructura alámbrica de los elementos en línea y la altura mínima de la estructura alámbrica de los elementos a nivel de bloque. Puede ser uno de los siguientes:

valor describir
normal El valor normal utilizado por el navegador.
div { altura de línea: normal; }
número Valor numérico sin unidad multiplicado por el tamaño de fuente del elemento
div { altura de línea: 1.5; }
estable valor fijo en pt, em, …
div {altura de línea: 12pt; }
div {altura de línea: 1,5 em; }
porcentaje valor porcentual
div { altura de línea: 150%; }
no cualquiera No se aplica altura de fila a los elementos
div { altura de línea: ninguno; }
heredar El elemento heredará la altura de la línea de su elemento principal
div { altura de línea: heredar; }

notas

  • Los porcentajes y los valores de em pueden causar un comportamiento de herencia no deseado y probablemente no deberían usarse. Lo mejor es utilizar un número sin unidades (por ejemplo, 1,5).
  • Cuando el valor se proporciona como un porcentaje, es relativo al tamaño de fuente del propio elemento.

Compatibilidad del navegador

La propiedad line-height de CSS tiene soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • androide
  • Firefox (Geco)
  • Firefox móvil (Geco)
  • Navegador de Internet (IE)
  • es decir, móvil
  • ópera
  • Ópera Móvil
  • Safari (WebKit)
  • Safari para móvil

ejemplo

Discutiremos la propiedad de altura de línea a continuación, explorando ejemplos de cómo usar esta propiedad con valores fijos y porcentuales en CSS.

uso normal

Veamos cómo establecer la altura de línea en normal.

div { line-height: normal; }

Este será el valor predeterminado utilizado por los navegadores. Puede encontrarse en una situación en la que la altura de la línea ha cambiado y desea volver a cambiarla a su comportamiento predeterminado.

Usar valores numéricos

Veamos un ejemplo en el que proporcionamos la altura de línea como un valor numérico sin unidades.

div { line-height: 1.2; }

En este ejemplo de altura de línea de CSS, proporcionamos un valor de 1,2. Este valor es un número sin unidades que se multiplicará por el tamaño de fuente del elemento para calcular la altura del cuadro de línea.

usar valor fijo

Veamos un ejemplo de CSS en el que proporcionamos la altura de línea como un valor fijo en píxeles.

div { line-height: 35px; }

En este ejemplo de altura de línea CSS, establecemos la altura de línea en 35 px.

También podemos representar la altura de la fila como un valor fijo en em.

div { line-height: 2em; }

En este ejemplo, establecemos la altura de línea en 2 em.

porcentaje de uso

Veamos un ejemplo que proporciona la altura de fila como un porcentaje.

div { line-height: 125% }

En este ejemplo de altura de CSS, establecemos la altura de línea en 125%.

(Visited 12 times, 1 visits today)