Alto de linea - line-height

El atributo line-height define la distancia entre lineas de base de un párrafo de texto.

En general los navegadores dividen el espacio extra sobre y bajo la linea de texto y posicionan el texto en el medio.

Ejemplos:

p {line-height: 2;} p {line-height: 2em;} p {line-height: 200%;}

Descripción

El primer ejemplo muestra sólo un número, éste se multiplica por el tamaño de la fuente para determinar el alto de la linea.

El segundo y tercer ejemplos definen el alto de linea utilizando unidades de medida, por lo tanto, si el tamaño heredado del elemento es 16px, entonces el alto de la linea será 32px.

Indentar - text-indent

El atributo text-indent mueve la primera linea de un texto una determinada distancia.

Ejemplos

p {text-indent: 2em;} p {text-indent: 25%} p {text-indent: -20px;}

Descripción

Notar que en el tercer ejemplo la indentación es negativa para mover la linea hacia la izquierda.

Alineación - text-align

El atributo text-align nos permite alinear los elementos en bloque de un contenedor en el eje horizontal.

Ejemplos

p {text-align: left;} p {text-align: right;} p {text-align: center;} p {text-align: justify;}

Visibilidad - visibility

El atributo visibility no es exclusivo de los textos, puede utilizarse con cualquier tipo de selector.

Este atributo permite ocultar el elemento, sin embargo, el espacio que ocupa se mantiene dejando un agujero en el sitio.

Ejemplo

h2 {visibility: visible} - Estado por defecto h2 {visibility: hidden} - Elemento invisible

Decoraciones

text-decoration

p {text-decoration: underline;} - Subrayar el texto p {text-decoration: overline;} - Linea arriba del texto p {text-decoration: line-through;} - Linea sobre el texto p {text-decoration: blink;} - Texto parpadea p {text-decoration: none;} - Quitar toda la decoración del texto

text-transform

p {text-transform: none;} - Deja el texto tal como se escribió p {text-transform: capitalize;} - Subir la primera letra de cada palabra p {text-transform: lowercase;} - Todas las letras minúscula p {text-transform: uppercase;} - Todas las letras mayúscula

letter-spacing y word-spacing

p {letter-spacing: 8px;} - Espacio entre letras p {word-spacing: 1.5em} - Espacio entre palabras