Unidad 17. Estilos CSS Avanzados (VIII)


17.8. Espaciado y alineación

Continuando con los controles de texto tenemos la propiedad word-spacing que establece la separación entre las palabras de un texto.

Este texto tiene una separación de 18 píxeles entre sus palabras.

Este, sin embargo, tiene una separación de -5 píxeles.

 

También podemos utilizar la propiedad letter-spacing para establecer la separación entre los caracteres del texto:

Este texto tiene una separación de 5 píxeles entre sus letras.

Este, sin embargo, tiene una separación de -2 píxeles.

 

vertical-align establece la alineación vertical del texto. Puede tomar los valores baseline, sub, super, top, text-top, middle, bottom, text-bottom.

baseline, sub, super, top, text-top, middle, bottom, text-bottom

Observa como los valores sub, super, text-bottom y text-top toman como referencia el tamaño del texto, mientras que top, middle y bottom toman como referencia el alto del párrafo completo.

Estas propiedades se suelen aplicar a las imágenes para alinearlas con respecto al texto:

baselinebaseline sub super top text-top middle bottom text-bottom

Esta propiedad no nos sirve para centrar verticalmente el contenido de un elemento.

 

line-height indica el alto de línea del texto, igual que el resto de propiedades puedes establecer esta altura en píxeles, ems, puntos u otras unidades.

Este texto tiene un alto de línea de 30 píxeles. Puedes ver que la separación entres estas líneas es mayor que la definida por defecto.

Este texto tiene un alto de línea de 10 píxeles. Puedes ver que la separación entres estas líneas es menor que la definida por defecto.

Si estableces simplemente valores numéricos podrás indicar el alto respecto a su tamaño normal. Por ejemplo:

p { line-height: 2; }

Esta línea muestra el texto con un interlineado doble. Si hubiésemos escrito 1.5 el interlineado sería un 50% más alto de lo normal.

Esta propiedad siempre la tenemos que asignar al elemento de bloque que contiene el texto.

Truco: Si tienes un elemento de alto específico, puedes centrar el texto verticalmente dándole al elemento un line-height igual que el alto. Esto sólo tiene sentido si tenemos una única línea de texto.

 

text-align establece la alineación horizontal del texto. Sus valores ya te deben ser familiares: left, right, center y justify.

Este texto está alineado a la izquierda con left.

Este texto está alineado a la derecha con right.

Este texto está alineado al centro con center.

Este texto está justificado (justify), ambos márgenes del texto tocarán los bordes. Si es necesario estirar las líneas se hará.

Esta propiedad la aplicaremos al elemento de bloque que contendrá el texto.

text-indent indica el tamaño de sangrado (o sangría) del texto, es decir la separación de la primera línea con el borde lado izquierdo. Tomará valores en puntos, píxeles o ems, como prefieras.

Párrafo identado 24px. Primera línea
Segunda línea.

Párrafo identado 48px. Primera línea
Segunda línea.

Párrafo identado 72px. Primera línea
Segunda línea.

Esta propiedad la aplicaremos al elemento de bloque que contendrá el texto.

 

white-space, esta propiedad es muy útil para evitar que el ancho del navegador modifique el ancho de las líneas del texto.

Puede tomar el valor nowrap para que el texto se muestre en una sola línea sin insertar saltos no deseados:

Este texto no tiene saltos de línea, así que se mostrará en toda su anchura aunque la ventana sea más estrecha.

 

También puedes establecer esta propiedad al valor pre. En este caso todos los espacios insertados en el texto se mostrarán y no se convertirán en uno sólo como ocurre normalmente. Además, si en el código hay saltos de línea, también se mostrarán:

En este texto podemos introducir tantos espacios como queramos. Da igual si son más de uno, se mostrarán igualmente.

Este último valor no funciona correctamente en Internet Explorer así que es recomendable utilizar la entidad HTML (&nsbp;) para mostrar más de un espacio.


Marzo-2015
Pág. 17.8
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.