Medida de separación entre las líneas de un párrafo: line-height
Establece la altura de línea entre líneas de texto.
Un ejemplo para este estilo es:
<!DOCTYPE html>
<html>
<head>
<style>
/* Estilo personalizado para el párrafo con line-height */
.texto-con-line-height {
line-height: 1.5; /* Aquí puedes ajustar el valor según tus preferencias */
}
.texto-con-line-height-2{
line-height: 10
; /* Aquí puedes ajustar el valor según tus preferencias */
}
</style>
</head>
<body>
<h1>Ejemplo de Line-Height</h1>
<p>Este es un párrafo de texto con line-height por defecto. El valor de la altura de línea es el normal del navegador.</p>
<p class="texto-con-line-height">Este es un párrafo de texto con line-height personalizado. La altura de línea es ajustada a 1.5 veces el tamaño de la fuente.</p>
<p class="texto-con-line-height-2">Este es otro párrafo de texto con line-height por defecto. La altura de línea sigue siendo la predeterminada. Holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>
<html>
<head>
<style>
/* Estilo personalizado para el párrafo con line-height */
.texto-con-line-height {
line-height: 1.5; /* Aquí puedes ajustar el valor según tus preferencias */
}
.texto-con-line-height-2{
line-height: 10
; /* Aquí puedes ajustar el valor según tus preferencias */
}
</style>
</head>
<body>
<h1>Ejemplo de Line-Height</h1>
<p>Este es un párrafo de texto con line-height por defecto. El valor de la altura de línea es el normal del navegador.</p>
<p class="texto-con-line-height">Este es un párrafo de texto con line-height personalizado. La altura de línea es ajustada a 1.5 veces el tamaño de la fuente.</p>
<p class="texto-con-line-height-2">Este es otro párrafo de texto con line-height por defecto. La altura de línea sigue siendo la predeterminada. Holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>
El párrafo con el identificador "texto-con-line-height" tiene una altura de 1.5, de modo que todas las lineas de este párrafo distan unos de otros 1.5 (sin unidad).
El párrafo con el identificador "texto-con-line-height-2" tiene una altura de 10, de modo que las líneas de este párrafos están más separados como se ve en el ejemplo 22.
Para aprender a controlar los espacios entre caracteres, haz clic aquí.
Volver a Catálogo de estilos.
Comentarios
Publicar un comentario