CSS: Distancias y tamaños

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%;
}

p {
  font-size: 75%;
}

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%;
}

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%;
}

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%;
}

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%;
}

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:

• em corresponde a la altura total del tipo de letra
• ex corresponde a la altura del carácter "x"
• ch corresponde a la altura del carácter "0"

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

Redefinición de la unidad px en CSS 3

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).