Teoría
Teoría

Propiedad line-height: controlamos el interlineado

La altura de línea o, más exactamente, el interlineado, puede controlarse con la propiedad line-height. El valor de esta propiedad puede definirse de varias maneras:

En píxeles, por ejemplo 24px, 48px.
Con un multiplicador, por ejemplo 1.5, 2.
En porcentajes: 150%.
Con otras unidades de CSS con las que también se define el tamaño de la fuente, por ejemplo 2em.
Con la palabra clave normal, que activa el cálculo automático de la altura de línea.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Propiedad line-height: controlamos el interlineado</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Responsive + Mobile First</h1> <p class="low"><span>La relación entre Responsive Design y Mobile First se parece mucho a la relación entre Graceful Degradation y Progressive Enhancement. El primer enfoque de cada pareja es más general, y el segundo es más específico y añade requisitos extra al primero: «empieza con HTML simple», «empieza a diseñar desde la versión móvil», «empieza por lo esencial».</span></p> <p class="high"><span>Vale la pena señalar que los enfoques mencionados combinan muy bien entre sí y se complementan de forma excelente. Y dentro de poco, los mejores equipos dirán: «Hacemos Mobile First + Progressive Enhancement».</span></p> </body> </html>

CSS

h1 { font-size: 24px; } span { background: rgba(210, 210, 210, 0.3); } .low { } .high { }

ObjetivosRealizado

Cambia el interlineado de los párrafos:

Asigna al párrafo con clase .low un interlineado de 10px.
Asigna al párrafo con clase .high un interlineado de 1.5.