# Distancias y tamaños

En esta página se tratan los siguientes temas:

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

Los porcentajes y unidades relativas se interpretan en el caso de los tamaños de fuentes con respecto al elemento contenedor, como muestra el ejemplo siguiente, en el que los párrafos dentro de la divisón se ven todavía más grandes que los párrafos de fuera de la división:

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

    <div>
    <p>Párrafo dentro de una división.</p>
    <p>Párrafo dentro de una división.</p>
    </div>
    <p>Párrafo fuera de una división.</p>
| Párrafo fuera de una división. Párrafo dentro de una división. Párrafo dentro de una división. Párrafo fuera de una división.
    div {
      border: black 2px solid; font-size:150%;
    }

    p {
      font-size: 150%;
    }

Volver al principio de la página

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

Nota: Para modificar sólo el tamaño de texto en Firefox tiene que estar marcada la opción del menú Ver > Tamaño > Sólo ampliar texto como se comenta en la lección de Configuración básica de Firefox. Para modificar sólo el tamaño de texto en Internet Explorer hay que utilizar la opción de menú Ver > Tamaño de texto o la opción de la barra de comandos Página > Tamaño de texto.

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

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

Las capturas de pantalla siguientes muestran cómo cambian el ancho del margen del ejemplo anterior al modificar el zoom aplicado o el tamaño de la ventana. La página que muestran las capturas es esta.

Nota: En la captura inferior derecha, la franja naranja es más alta porque el texto ocupa dos líneas en vez de una

| Ventana | Ventana reducida
Texto normal |  |
Texto ampliado |  |

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.

En la práctica, si se quiere averiguar qué unidad se ha utilizado en una página web, el procedimento a seguir sería el siguiente:

- hacer zoom. Si se modifican los tamaños, la unidad utilizada es em (em). Si no se modifican, hay que ...
- estrechar la ventana horizontalmente. Si se modifican los tamaños horizontales, la unidad utilizada es porcentaje (%). Si tampoco se modifican, ...
- la unidad utilizada es (px).

Volver al principio de la página

## 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: 20px. Tamaño de fuente en porcentaje: 120%.

Las capturas de pantalla siguientes muestran cómo cambian el tamaño de la fuente al modificar el tamaño de texto en el navegador. La página que muestran las capturas es esta.

| Texto normal | Texto ampliado
Firefox |  |
Internet Explorer 8 |  |

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 (utilizando el menú Ver > Tamaño del texto, no el zoom con Ctrl+rueda). 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.

En la práctica, si se quiere averiguar qué unidad se ha utilizado en una página web, el procedimento a seguir sería el siguiente:

- aumentar el tamaño de texto en Internet Explorer. Si se modifican los tamaños, la unidad utilizada es porcentaje (%). Si no se modifican, ...
- la unidad utilizada es (px).

Volver al principio de la página

## 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 px, 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 em, 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 principio de la página