CSS | Propiedad de altura de línea

La propiedad line-height en CSS se utiliza para establecer la cantidad de espacio utilizado para las líneas, como en el texto. No se permiten valores negativos.

Sintaxis:

line-height: normal|number|length|percentage|initial|inherit;

Valores de propiedad :

normal: Este modo representa la altura de línea normal. Este es el valor predeterminado.

line-height: normal;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS line-height Property</title>
        <style>
            .geek {
              line-height: normal;
              background: green;
              color: white;
            }
        </style>
    </head>
    <body style = "text-align:center;">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            CSS line-height Property
        </h2>
          
        <div class="geek">
            A computer science portal for geeks.<br>
            This div has line-height: normal;
        </div>
    </body>
</html>

Producción:
lineheight

número: este valor es un número sin unidades multiplicado por el tamaño de fuente actual para establecer la altura de la línea. En la mayoría de los casos, esta es la forma preferida de establecer la altura de línea y evitar resultados inesperados debido a la herencia.

line-height: number;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS line-height Property</title>
        <style>
            .geek {
              line-height: 2.5;
              background: green;
              color: white;
            }
        </style>
    </head>
    <body style = "text-align:center;">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            CSS line-height Property
        </h2>
          
        <div class="geek">
            A computer science portal for geeks.<br>
            This div has line-height: 2.5;
        </div>
    </body>
</html>

Producción:
lineheight

longitud: En este modo se especifica una altura de línea fija.

line-height: length;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS line-height Property</title>
        <style>
            .geek {
              line-height: 2em;
              background: green;
              color: white;
            }
        </style>
    </head>
    <body style = "text-align:center;">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            CSS line-height Property
        </h2>
          
        <div class="geek">
            A computer science portal for geeks.<br>
            This div has line-height: 2em;
        </div>
    </body>
</html>

Producción:
lineheight

porcentaje: este modo se utiliza para establecer la altura de la línea en porcentaje del tamaño de fuente actual.

line-height: percentage;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS line-height Property</title>
        <style>
            .geek {
              line-height: 150%;
              background: green;
              color: white;
            }
        </style>
    </head>
    <body style = "text-align:center;">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            CSS line-height Property
        </h2>
          
        <div class="geek">
            A computer science portal for geeks.<br>
            This div has line-height: 150%;
        </div>
    </body>
</html>

Producción:
lineheight

initial: este modo se utiliza para establecer esta propiedad en su valor predeterminado.
Sintaxis:
```
line-height: initial;
```

Navegadores compatibles: los navegadores compatibles con la propiedad line-height se enumeran a continuación:

Google Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Ópera 7.0
Apple Safari 1.0

Publicación traducida automáticamente

Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta