Volvemos con los artículos de guías para la gente de nivel principiante, que requieran CSS Básico. Esta vez hablaremos de la propiedad line-height, muy importante ya que permitirá aumentar la legibilidad de nuestro contenido y facilitar la lectura a los visitantes. Aunque ya hemos hablado de esta propiedad hace unos años, volvemos a la carga con ella, de una manera más sencilla aún si cabe.

¿Qué es la propiedad line-height?

La propiedad line-height se utiliza para especificar el interlineado de un bloque de texto. Lo más normal es usar porcentajes o em para expresar el valor, aunque se puede indicar en cualquier unidad. Expresado en porcentajes el valor 100% corresponde al interlineado normal. Por ejemplo:

Ejemplo 1

p {
line-height: 100%;
}

Párrafo con interlineado normal, o como también se dice, un interlineado sencillo.“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Ejemplo 2

p {
line-height: 300%;
}

Párrafo con interlineado doble. Las líneas del texto se encuentran separadas el doble de lo normal.“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Ejemplo 3

p {
line-height: 150%;
}

Párrafo con interlineado del 150%, es decir, de 1,5 líneas. Las líneas del texto se encuentran separadas un 50% más de lo normal.“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Vía | Mclibre