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:
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
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ú 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ú o la opción de la barra de comandos .
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:
Volver al principio de la página
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ú , 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:
Volver al principio de la página
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 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. |
| p { letter-spacing: 10px; } | Espaciado fijo |
| p { letter-spacing: 1ex; } | Espaciado proporcional |
Volver al principio de la página
Autor: Bartolomé Sintes Marco