En este artículo, aprenderemos cómo establecer la altura de la línea en porcentaje usando CSS. La altura de línea es una propiedad de CSS que se utiliza para proporcionar altura después de cada elemento.
Enfoque: Usaremos la propiedad line-height en CSS y estableceremos el valor usando un porcentaje. El porcentaje establece la altura de la línea en relación con el tamaño de fuente del elemento. El valor final que se establece se determina multiplicando el tamaño de fuente calculado del elemento con el valor porcentual dado.
Sintaxis:
line-height: percent
Ejemplo 1: En este ejemplo, se utilizan diferentes valores porcentuales de la altura de línea con el mismo tamaño de fuente.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-size: 25px;
background-color: lightgreen;
}
div.a {
line-height: 50%;
}
div.b {
line-height: 100%;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksForGeeks
</h1>
<h3>line-height: 50%:</h3>
<div class="a">
This is a paragraph with a
lower line-height.<br>
The line height is here set to 50%.
</div>
<h3>line-height: 100%:</h3>
<div class="b">
This is a paragraph with a
higher line-height.<br>The
line height is here set to 100%.
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, se utiliza el mismo valor porcentual de la altura de la línea con un tamaño de fuente diferente.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-size: 25px;
background-color: lightgreen;
}
div.a {
font-size: 24px;
line-height: 125%;
}
div.b {
font-size: 48px;
line-height: 125%;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksForGeeks
</h1>
<h3>
line-height: 125%,
font-size: 24px
</h3>
<div class="a">
This is a paragraph with the same
line-height but lower font-size.
<br>The line height is here set
to 125% and font-size is 24px.
</div>
<h3>line-height: 125%,
font-size: 48px</h3>
<div class="b">
This is a paragraph with the same
line-height but higher font-size.
<br>The line height is here set to
125% and font-size is 48px.
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA