CSS 3: Distancias y tamaños

En esta página se comentan las unidades de distancia definidas en la recomendación CSS 3 Valores y unidades. Esta recomendación se encuentra actualmente (octubre de 2016) en fase de elaboración, pero los navegadores actuales la cumplen sobradamente (especialmente en lo que respecta al significado de la unidad px), el cambio más significativo con respecto a CSS 2.

En construcciónEsta lección se encuentra en elaboración.

Unidades de distancias y tamaños

En una página web o en una hoja de estilo se pueden definir las distancias o tamaños como porcentajes o como valores numéricos (absolutos o relativos).

Las unidades relativas disponibles son:

En la práctica, las unidades relativas más utilizadas son em y rem.

Las unidades absolutas disponibles son:

En la práctica, las unidades absolutas más utilizadas son px y pt.

Unidades relativas

Entre la unidades relativas, es necesario distinguir la unidad rem del resto de unidades relativas o de los porcentajes.

Porcentajes %

Cuando se emplean porcentajes para expresar el tamaño del tipo de letra, los valores superiores a 100% significan una ampliación y los valores inferiores a 100% significan reducción.

p {
  font-size: 200%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-size: 75%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Cuando se emplean porcentajes para expresar distancias o tamaños de elementos, los porcentajes se interpretan con respecto al elemento contenedor (cuando se refieren a distancias horizontales), o respecto al elemento contenedor o el tamaño de la ventana (cuando se refieren a distancias verticales).

hr {
  width: 50%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Debido a que las propiedades se aplican en cascada, al cambiar el tamaño de un elemento, los elementos contenidos en él también modifican su tamaño. En el ejemplo siguiente, el párrafo situado en la división <div> aumenta su tamaño al 150%

<p>Párrafo fuera de una división.</p>

<div>
  <p>Párrafo dentro de una división.</p>
</div>
div {
  border: black 2px solid;
  font-size: 150%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

¡Atención!Si se cambia el tamaño en dos elementos anidados, los porcentajes se multiplican entre sí. A este fenómeno se le denomina "composición", es decir, el tamaño final es la composición de tamaños de cada elemento.

En el ejemplo siguiente, los párrafos están aumentados al 150%, por lo que el párrafo situado en la división (cuyo contenido está a su vez aumentado al 150%), está aumentado el 225% (el 150% del 150%, 150% x 150% = 225%).

<p>Este párrafo está aumentado al 150%.</p>

<div>
  <p>Este párrafo está aumentado al 150%.</p>
</div>

div {
  border: black 1px solid;
  font-size: 150%;
}

p {
  font-size: 150%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Esta composición de tamaños no siempre es conveniente y puede provocar cambios de tamaños indeseados debido a anidamientos no previstos. Para evitarlo, se puede utilizar la unidad relativa rem, introducida en CSS 3.

En el ejemplo siguiente, las líneas horizontales ocupan el 50% del espacio disponible, por lo que la línea situada en la división (que a su vez ocupa el 50% del espacio disponible), ocupa en realidad el 25% del total (el 50% del 50%, 50% x 50% = 25%).


div {
  width: 50%;
  border: black 1px solid;
}

hr {
  width: 50%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Unidades relativas em, ex y ch

Las unidades relativas em, ex y ch permiten expresar el tamaño en función de la altura de un carácter:

En el ejemplo siguiente, los párrafos tienen un borde con un grosor expresado en em, ex y ch.


p.borde-em {
  border: red 1em solid;
}

p.borde-ex {
  border: green 1ex solid;
}

p.borde-ch {
  border: blue 1ch solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

En estas unidades, el tamaño depende del tipo de letra que se esté utilizando. En los ejemplos siguientes, los párrafos tienen un borde con un grosor 1ex. Como la letra "x" tiene una altura diferentre en cada tipo de letra (x x x) el grosor del borde es distinto en cada caso.


p.borde-em-serif {
  border: red 1ex solid;
  font-family: serif;
}

p.borde-em-sans-serif {
  border: green 1ex solid;
  font-family: sans-serif;
}

p.borde-em-monospace {
  border: blue 1ex solid;
  font-family: monospace;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

La unidad relativa em se puede relacionar directamente con los porcentajes, concretamente 1em = 100%.


Con las unidades relativas em, ex y ch se produce también el fenómeno de composición comentado en el apartado anterior sobre porcentajes, es decir que si se cambia el tamaño en dos elementos anidados, los porcentajes se multiplican entre sí

<p>Este párrafo está aumentado a 1.5em.</p>

<div>
  <p>Este párrafo está aumentado a 1.5em.</p>
</div>
div {
  border: black 2px solid;
  font-size: 1.5em;
}

p {
  font-size: 1.5em;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Esta composición de tamaños no siempre es conveniente y puede provocar cambios de tamaños indeseados debido a anidamientos no previstos. Para evitarlo, se puede utilizar la unidad relativa rem, introducida en CSS 3.

La unidad relativa rem

La unidad relativa rem corresponde a la altura total del tipo de letra, como em, pero con la diferencia que la altura se interpreta siempre con respecto al elemento raíz de la página.

Por tanto, con la unidad relativa rem no se produce el fenómeno de composición de tamaños en elementos anidados, como muestra el ejemplo siguiente, en el que los párrafos dentro de la divisón se ven del mismo tamaño que los párrafos de fuera de la división:

<p>Este párrafo está aumentado a 1.5rem.</p>

<div>
  <p>Este párrafo está aumentado a 1.5rem.</p>
</div>
div {
  border: black 2px solid;
  font-size: 1.5rem;
}

p {
  font-size: 1.5rem;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Está unidad se introdujo en CSS 3, por lo que daba problemas en las versiones de Internet Explorer anteriores a IE 11. Aunque esas versiones tienen un uso cada vez menor (actualmente -octubre de 2016- inferior al 8%), su existencia ha frenado el uso generalizado de rem. Seguramente, su uso se incrementará en los próximos años, a medida que vayan despareciendo esos navegadores.

Unidades relativas al tamaño de la pantalla vw, vh, vmin y vmax

En construcciónPor escribir.

Unidades absolutas

Todas las unidades absolutas están relacionadas, puesto que se trata de unidades de distancia:

La imagen siguiente muestra estas distancias a tamaño real y aumentado:

Unidades absolutas SVG a escala Real: 1in 1cm 1pc Aumentado: 1in 1cm 1pc 1mm 1pt 1px 1q Aumentado: 1mm 1pt 1px 1q

Redefinición de la unidad px en CSS 3

¡Atención!En CSS 2 el píxel (px) era una unidad relativa, ya que se refería al tamaño de un píxel físico de una pantalla. Cuando se redactó CSS 2, en los años 90, los píxeles de las pantallas tenían más o menos el mismo tamaño en todas las pantallas, por lo que al definir elementos en px, el resultado era más o menos el mismo en todas las pantallas.

El problema es que desde hace unos años existen pantallas de alta densidad (sobre todo en los móviles) en los que los píxeles físicos son mucho más pequeños que en las pantallas de loas años 90. En estas pantallas, los elementos definidos en px se ven mucho más pequeños, lo que convierte en ilegibles las páginas.

Este problema se ha resuelto en CSS 3 redefiniendo la unidad px, convirtiéndola en una distancia absoluta, independiente del tamaño del píxel de la pantalla. Para mantener cierta compatibilidad con la definición antigua, se ha tenido en cuenta que las pantallas de los años 90 tenían una densidad de píxeles de 96dpi (96dpi = 96 dots per inch = 96 puntos por pulgada), definiendo el nuevo px de manera que 96 píxeles miden 1 pulgada (96px = 1in).

Unidades recomendadas en estos apuntes

La elección de unidades es algo muy personal, pero en estos apuntes se intentará utilizar siempre las siguientes unidades:

La función calc()

En construcciónPor escribir.