Establecer el espaciado de línea en CSS

Introduciremos algunos métodos para establecer el interlineado en CSS.

Utilice la propiedad line-height para establecer el interlineado en CSS

Podemos usar la propiedad CSS line-height para definir el espacio entre las líneas en un párrafo. La propiedad establece la altura de una línea.

Al definir la altura de la línea, el espacio entre las líneas aumentará o se reducirá en consecuencia. Podemos aplicar la propiedad line-height a elementos de texto, particularmente a un párrafo.

La propiedad toma diferentes valores como normal, number, length, %, initial y inherit. Demostraremos el uso de estas diversas opciones en el artículo.

El valor normal es el valor predeterminado para la propiedad line-height. Establecerá la altura de línea normal.

Podemos establecer el valor como un number sin unidades. El número dado se multiplicará por el tamaño de fuente actual, y se utiliza para establecer el line-height. El número 1.6 es el valor recomendado para la propiedad line-height.

También podemos utilizar el valor length, dando las unidades como pt, px, cm, etc. El valor en % especifica el porcentaje del tamaño de fuente actual para establecer el line-height.

Podemos establecer el valor predeterminado de la propiedad line-height usando el valor initial. El valor inherit utilizará el mismo valor de la propiedad de su elemento padre.

Por ejemplo, cree cuatro div en HTML con las clases normal, number, percentage y length. Dentro del div, escriba un texto ficticio.

Luego, en CSS, seleccione el elemento div y establezca la propiedad width en 400px y la propiedad word-wrap en break-word. A continuación, seleccione el individuo div con el nombre de la clase y establezca los valores de la propiedad line-height como normal, 2, 80% y 10px de acuerdo con los nombres de clase que se muestran en el ejemplo siguiente.

Establecemos el ancho div y la propiedad word-wrap en break-word para forzar el texto en la siguiente línea. De esta manera, podemos usar la propiedad line-height para establecer el interlineado en CSS.

Código de ejemplo:

<h2>Normal Value</h2>
<div class="normal">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio. </div>

<h2>Number Value </h2>
<div class="number">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Percentage Value</h2>
<div class="percentage">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Length Value</h2>
<div class="length">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

div{
 width:400px;
 word-wrap: break-word;
}
div.normal {
 line-height: normal;
}

div.number {
 line-height: 2;
}

div.percentage {
 line-height: 80%;
}

div.length {
 line-height: 10px;
}