Alineación y espaciado

Espacio entre caracteres

La propiedad letter-spacing permite incrementar o decrementar la distancia entre los distintos caracteres de un texto. Es posible asignar valores positivos o negativos de espaciado, según deseemos incrementar o decrementar dicha distancia. Veamos algunos ejemplos típicos de uso:

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: 2px;
}

h3 {
  letter-spacing: -1px;
}

Espacio entre palabras

La propiedad word-spacing permite incrementar o decrementar la distancia entre las distintas palabras de un texto. Es posible asignar valores positivos o negativos de espaciado, según deseemos incrementar o decrementar dicha distancia. Veamos un ejemplo típico de uso:

p {
  word-spacing: 30px;
}

Interlineado

La propiedad line-height permite establecer el valor de interlineado (altura de línea). Si se indica el valor en %, éste se tomará respecto el tamaño de la fuente actual. Si se indica un valor numérico sin unidad de medición, este se empleará como multiplicador a aplicar al actual tamaño de fuente. Veamos algunos ejemplos de uso:

/* Esta altura de línea no se recomienda ya que las líneas se solapan */
div.a {
    line-height: 0.5;
}
/* Esta altura sería la recomendada para la mayoría de escenarios */
div.b {
    line-height: 1.6;
}
/* Esta altura da aire al texto ya que el interlineado es espacioso */
div.c {
    line-height: 2;
}

Alineación horizontal

La propiedad text-align permite establecer la alineación del texto de un elemento. Las palabras reservadas que se admiten como posibles valores para la propiedad son:

• left : Alinea el texto a la izquierda.

• right : Alinea el texto a la derecha.

• center : Centra el texto.

• justify : Justifica el texto.

Veamos algunos ejemplos de uso:

h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}

Alineación vertical

La propiedad vertical-align permite establecer la alineación vertical de un elemento. Nótese que todos los elementos se encuentran verticalmente alineados respecto una línea invisible que se denomina línea base o baseline. Las palabras reservadas que se admiten como posibles valores para la propiedad son:

• baseline : Alinea el elemento seleccionado con la baseline del elemento padre. Es el valor por defecto.

• sub : Alinea el elemento seleccionado con la subscript baseline del elemento padre. Aparece pues, algo por debajo que el resto de elementos adyacentes alineados a la baseline.

• super : Alinea el elemento seleccionado con la superscript baseline del elemento padre. Aparece pues, algo por encima que el resto de elementos adyacentes alineados a la baseline.

• top : Alinea el elemento seleccionado con el límite superior del elemento más elevado de la línea.

• bottom : Alinea el elemento seleccionado con el límite inferior del elemento más hundido de la línea.

• middle : Alinea el elemento seleccionado con el punto medio del elemento padre (verticalmente).

• text-top : Alinea el elemento seleccionado con el límite superior de la fuente del elemento padre.

• text-bottom : Alinea el elemento seleccionado con el límite inferior de la fuente del elemento padre.

Alineado vertical

Además del uso de palabras reservadas, la propiedad admite valores numéricos que permiten levantar o soterrar el elemento respecto la línea base, por ello es posible introducir valores negativos (0 = baseline). En el supuesto de indicar un %, dicho porcentaje se realiza sobre el valor de la propiedad line-height.

Veamos algunos ejemplos de uso:

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: middle;
}

img.c {
  vertical-align: 50%;
}

img.d {
  vertical-align: super;
}

img.e {
  vertical-align: -25px;
}

Indentación

La propiedad text-indent permite incrementar o decrementar la indentación de la primera línea de un texto. Es posible asignar valores positivos o negativos de indentación, según deseemos indentar hacia la derecha o hacia la izquierda. Veamos algunos ejemplos típicos de uso:

div.a {
  text-indent: 50px;
}

div.b {
  text-indent: -2em;
}

div.c {
  text-indent: 30%;
}