# Distancias y tamaños

En este tema se comenta:

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

Los porcentajes se escriben con el símbolo de porcentaje pegado al valor numérico (sin espacio entre ellos). Por ejemplo: 100%, 50%, etc.

Los valores numéricos pueden ser positivos o negativos, enteros o decimales (utilizando el punto como separador de las partes entera y decimal). Las unidades deben ir pegadas a los valores numéricos (sin espacio entre ellos).

Las unidades relativas disponibles son:

- em: el tamaño de la fuente actual
- ex: la altura de la letra x de la fuente actual
- px: pixeles de la pantalla

Las unidades absolutas disponibles son:

- cm: centímetros
- mm: milímetros
- in: pulgadas (1in = 2,54cm = 25.4mm)
- pc: picas, la sexta parte de una pulgada (1in = 6pc)
- pt: puntos, la doceava parte de una pica, es decir, la 72ava parte de una pulgada (1in = 6pc = 72pt)

Volver al índice

## Distinguir distancias definidas en px, em y %

Una distancia (por ejemplo, el margen de un párrafo) puede estar definida en cualquier unidad. Para distinguir si está definida en píxeles (px), em o porcentaje (%), basta con modificar el tamaño de texto y/o el tamaño de la ventana del navegador.

El ejemplo siguiente muestra tres prárrafos con márgenes de color Coral definidos en cada una de las unidades.

hr { width: 500px; } p.e1 { margin-left: 50px; } p.e2 { margin-left: 20%; } p.e3 { margin-left: 4em; } | Margen izquierdo en píxeles (px). Margen izquierdo en porcentaje (%). Margen izquierdo en em (em).

Una distancia definida en px no cambia si el usuario cambia el tamaño de texto en su navegador o si el usuario cambia el tamaño de la ventana del navegador (aunque sí que cambia si el usuario cambia la resolución de la pantalla).

Una distancia definida en em es proporcional al tamaño de la fuente, por lo que si el usuario cambia el tamaño de texto en su navegador, la distancia aumentará o disminuirá proporcionalmente.

Una distancia (horizontal) definida en porcentaje (%) es proporcional al tamaño de la ventana, por lo que si el usuario cambia el tamaño de la ventana del navegador, la distancia aumentará o disminuirá proporcionalmente.

Las unidades centímetros (cm), milímetros (mm), pulgadas (in), picas (pc) y puntos (pt) se comportan como los píxeles (px).

La unidad ex se comporta como la unidad em.

Volver al índice

## Distinguir tamaños de fuentes definidos en px y %

El tamaño de fuente puede estar definido en cualquier unidad.

El ejemplo siguiente muestra dos prárrafos con tamaños definidos en píxeles (px) o porcentaje (%):

p.e1 { font-size: 20px; } p.e2 { font-size: 120%; } | Tamaño de fuente en píxeles (px). Tamaño de fuente en porcentaje (%).

En Firefox no se puede distinguir una unidad de otra, ya que todos los tamaños cambian porporcionalmente al modificar el tamaño de texto.

En Internet Explorer, para distinguir si el tamaño está definido en píxeles (px) o porcentaje (%), basta con modificar el tamaño de texto. Un tamaño definido en px no cambia si el usuario cambia el tamaño de texto en su navegador, mientras que un tamaño definido en % sí que cambia.

Las unidades centímetros (cm), milímetros (mm), pulgadas (in), picas (pc) y puntos (pt) se comportan como los píxeles (px).

Las unidades em y ex se comportan como el porcentaje (%). Hay que tener en cuenta que 100% = 1em y que generalmente los navegadores consideran que 1em = 2ex.

Volver al índice

## Elegir la unidad adecuada

Al diseñar una página, hay que tener en cuenta que se van a ver en pantallas muy distintas y conviene dejar la mayor libertad posible al usuario. A continuación, se muestran algunos ejemplos para ilustrar la diferencia entre definir los tamaños de forma fija o de forma proporcional.

### Indentado fijo o proporcional

p { text-indent: 25px; } | Este párrafo tiene el indentado definido en píxeles, por lo que si el usuario cambia el tamaño de la fuente, el espacio al principio del párrafo no cambiará.
p { text-indent: 2em; } | Este párrafo tiene el indentado definido en píxeles, por lo que si el usuario cambia el tamaño de la fuente, el espacio al principio del párrafo será proporcional a la fuente.

### Espaciado fijo o proporcional

p { letter-spacing: 10px; } | Espaciado fijo
p { letter-spacing: 1ex; } | Espaciado proporcional

Volver al índice