Uso de la propiedad line-height en #CSS

Uso de la propiedad line-height en CSS, CableNaranja

¡Comparte nuestro contenido!

La propiedad line-height permite definir la altura de una línea de texto en objetos de tipo inline como párrafos, encabezados entre otros. El uso de esta propiedad está definido en la especificación 2.1 de CSS. Inicialmente, el line-height depende del tamaño y tipo de fuente, pero se puede modificar y expresarse en porcentajes o en unidades fijas como píxeles (px), puntos (pt), o em.

Aplicando line-height

Necesitamos algo de código para trabajar, copie y pegue la siguiente estructura HTML:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta lang="es" />
        <title>Uso de atributo line-height</title>       
    </head>
    <body>
        <h2>What is Lorem Ipsum?</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
            <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
            <li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        </ul>
    </body>
</html>

Abrimos un bloque <style></style> para hacer pruebas. Primero hagamos que todos los párrafos tengan un alto de línea de 20 píxeles.

p{
   line-height: 20px;
}

Lo cual, se ve así:

Uso de la propiedad line-height en CSS, CableNaranja

Ahora, le pondremos un alto de línea de 40 píxeles a cada elemento de lista.

li{
   line-height: 40px;
}

Ciertamente, ya se ve un poco diferente.

Uso de la propiedad line-height en CSS, CableNaranja

Por último, haremos uno de nuestros párrafos diferentes, lo daremos un ancho de 50%, se enviará al centro, y para variar un poco, le pondremos un line-height de 40 puntos.

#diferente{
   display: block;
   width: 50%;
   margin: 10px auto;
   line-height: 40pt;
}

Entonces, al aplicarlo al tercer párrafo, queda así:

Uso de la propiedad line-height en CSS, CableNaranja

¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.


¡Comparte nuestro contenido!

Israel García

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

Podría también gustarte...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

shares