Distancias y
tamañosDistancias y
tamañosEn esta página se tratan los siguientes temas:
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:
Las unidades absolutas disponibles son:
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: 60px; }
p.e1 { margin-left: 60px; } 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.
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.
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.
| 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. |
| p { letter-spacing: 10px; } | Espaciado fijo |
| p { letter-spacing: 1ex; } | Espaciado proporcional |