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

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

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.

Unidades relativas respecto al tipo de letra em

Las unidades relativas em permite expresar el tamaño en función de la altura de un carácter:

• em corresponde a la altura total del tipo de letra

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

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

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

p.borde-ch {
  border: blue 2em 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;
}

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.

Pero la aparición de pantallas de alta densidad (sobre todo en los móviles) rompió ese equilibrio, ya que los píxeles físicos son mucho más pequeños que en las pantallas de loas años 90. En estas pantallas de alta densidad, los elementos definidos en px se hubieran visto mucho más pequeños, lo que haría ilegibles las páginas.

Este problema se resolvió 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 tuvo 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 equivalen a 1 pulgada (96px = 1in).