CSS: Distancias y tamaños

En esta lección se comenta las unidades de distancia definidas en la futura recomendación CSS Values and Units Module Level 3. Aunque actualmente (marzo de 2023) esta recomendación no está formalmente aprobada, se considera parte de la definición oficial de CSS en CSS Snapshot 2023.

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 definidas respecto al tipo de letra son:

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

Las unidades relativas definidas respecto a la pantalla son:

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%;
}
Enlace externo
p {
  font-size: 75%;
}
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%;
}
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%;
}
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%;
}
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%;
}
Enlace externo

Unidades relativas respecto al tipo de letra 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;
}
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 1em. Como cada fuente tiene una altura total diferente, el grosor del borde es distinto en cada caso.

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

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

p.borde-em-monospace {
  border: blue 1em solid;
  font-family: monospace;
}
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;
}
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 respecto al tipo de letra 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 divisió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;
}
Enlace externo

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

Las unidades relativas vw y vh corresponden, respectivamente, al 1% del ancho y alto total disponibles para el documento.

<p>Este párrafo ocupa la cuarta parte de la pantalla disponible.</p>

<p>Este párrafo ocupa la cuarta parte de la pantalla disponible.</p>
p {
  background-color: lightgray;
  width: 50vw;
  height: 50vh;
}
Enlace externo

Las unidades relativas vmin y vmax corresponden, respectivamente, al menor y mayor de los valores vw y vh.

<p class="min">Este párrafo cuadrado ocupa la mitad del lado más corto.</p>

<p class="max">Este párrafo cuadrado ocupa la mitad del lado más largo.</p>
p.min {
  background-color: lightgray;
  width: 50vmin;
  height: 50vmin;
}

p.max {
  background-color: lightgray;
  width: 50vmax;
  height: 50vmax;
}
Enlace externo

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.