Curso Completo de CSS de principiante a avanzado - CURSO de CSS - 60 ¿Como CAMBIAR la ALTURA de LINEA de un TEXTO en CSS?

Puntos Clave de la Lección

• Definición y uso de la propiedad line-height: Se introduce la propiedad encargada de definir la altura de la caja de línea de un texto. Al establecerla, se observa cómo el espacio ocupado por cada renglón se modifica, afectando el diseño global del bloque. [00:00:12]
• Uso del valor "normal": Se explica cómo la palabra clave "normal" restablece el espaciado predeterminado del navegador, siendo el punto de partida estándar cuando no se requiere una modificación específica. [00:00:41]
• Aplicación con unidades de medida: Se demuestra cómo asignar valores fijos, como los píxeles (px), para definir una altura de línea exacta, lo cual provoca que el texto se centre verticalmente dentro de ese nuevo espacio definido. [00:01:16]
• Uso de valores numéricos como multiplicadores: Se detalla cómo el uso de números simples (ej. 2 o 1.5) permite crear una altura de línea relativa, multiplicando el tamaño de fuente actual del elemento por dicho número, facilitando así un diseño más flexible y escalable. [00:02:08]
• Comportamiento con unidades relativas (REM): Se analiza cómo interactúa la propiedad con unidades como el REM, tomando como referencia el tamaño de fuente raíz del documento para calcular el espaciado final de manera jerárquica. [00:02:29]

Productos útiles para este curso

Para seguir esta clase, se recomienda contar con un editor de código como Visual Studio Code y un navegador moderno (Chrome o Firefox) con herramientas de inspección habilitadas para visualizar los cambios en el modelo de caja.

Resumen Final

El control del espaciado vertical mediante line-height es esencial para una buena tipografía en CSS. Se ha aprendido que es posible utilizar medidas estáticas en píxeles para un control total, o valores numéricos relativos para que el espaciado sea proporcional al tamaño de la fuente, garantizando que el diseño mantenga su consistencia aunque el texto escale.

Créditos del Autor

Esta lección ha sido adaptada del contenido original creado por el canal de tutoriales de programación web, especializado en desarrollo frontend y diseño de interfaces con CSS. Se recomienda visitar su canal oficial de YouTube para profundizar en estos contenidos.