Código HTML para alturas de interlineado

Escrito por ben lingenfelter | Traducido por luciano ariel castro
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Código HTML para alturas de interlineado
HTML es la columna vertebral de Internet. (Dynamic Graphics/Dynamic Graphics Group/Getty Images)

Controla el espacio vertical entre las líneas de texto dentro de un párrafo de una página Web para afinar la presentación visual. Si necesitas un poco más de espacio ocupado de texto, o necesitas exprimir un poco más de texto en un espacio determinado, puedes utilizar etiquetas HTML y CSS para cambiar el espaciado de línea a la medida adecuada. Con unas pocas líneas de código puedes ajustar la altura del espacio entre líneas, o el "alto de línea" en tu página Web.

Otras personas están leyendo

HTML estricto

Para crear un espacio entre líneas que se vea bien, o que ayude a hacer que una sección de texto encaje perfectamente dentro del área apropiada en un sitio, utiliza HTML estricto. Selecciona la opción "fuente" de etiquetas para crear un código como este:

<font style="line-height:150%">

El "150%" es la parte que aumenta la distancia entre las líneas de texto. Sustituye los valores para aumentar o disminuir el espacio.

Código HTML para alturas de interlineado
Sustituye los valores para aumentar o disminuir el espacio. (Computer image by Haris Rauf from Fotolia.com)

Etiqueta span

Utiliza etiquetas span para aplicar el cambio de altura de la línea de texto escrito entre la apertura y el cierre de la etiqueta. La codificación es similar a:

<span style="color:#FFF; line-height:150%; font-size:12px;"> texto va aquí ... </ span>

Utiliza un número de píxeles para ajustar el tamaño de la fuente en lugar de los tamaños relativos grandes, medianos o pequeños. Utilizar mediciones precisas para el tamaño de fuente permite un mejor control del texto y permite que el espacio entre líneas trabaje mejor.

Código HTML para alturas de interlineado
Utilizar mediciones precisas para el tamaño de fuente permite un mejor control del texto y permite que el espacio entre líneas trabaje mejor. (computer image by blaine stiger from Fotolia.com)

Alternativas CSS

El interlineado también se puede ajustar mediante una hoja de estilos en cascada (CSS). El CSS controla cualquier elemento que decides aplicar, ya sea un ID de span que has establecido para una sola sección del texto en la página o toda una clase de objetos de uso común. Por ejemplo, si estás trabajando con un blog puedes crear una clase para las entradas del blog y fijar la altura de la línea de la hoja de estilos para la clase a 135%. Cada entrada del blog tendría la altura de la misma línea. El código para el establecimiento del "alto de línea" en CSS es:

{line-height: 150%;}

Código HTML para alturas de interlineado
El interlineado también se puede ajustar mediante una hoja de estilos en cascada (CSS). (computer image by blaine stiger from Fotolia.com)

Control de espaciado de línea WYSIWYG

Muchos de estos problemas de codificación pueden evitarse mediante el uso de un editor WYSIWYG Web o mediante la creación de sitios con programas en línea, tales como WordPress y Joomla, o sitios web con herramientas de creación gratuitos como Weebly, Wix y Moonfruit. Todas estas herramientas proporcionan editores de texto que mantienen las conjeturas y dolores de cabeza fuera. Un simple clic de un botón del ratón y el interlineado aumenta del mismo modo que lo haría si estuvieras escribiendo un documento en tu procesador de textos favorito.

La mayoría de los editores Web, no importa cómo sea su interfaz WYSIWYG, son mucho más fáciles de usar si sabes cómo codificar, incluso si encuentras que estas codificando mucho menos de lo que solías.

Código HTML para alturas de interlineado
La mayoría de los editores Web, no importa cómo sea su interfaz WYSIWYG, son mucho más fáciles de usar si sabes cómo codificar. (computer image by martini from Fotolia.com)

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles