MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Resumen

El tipo de dato CSS <length> denota medidas de distancia. Es un valor <number> seguido por una unidad de longitud (px, em, pc, in, mm, …). Al igual que en cualquier dimensión CSS, no debe haber espacio entre la unidad y el número. La unidad de longitud es opcional después del valor <number> 0.

Muchas propiedades CSS (CSS properties) reciben valores <length>, como por ejemplo width, margin-top, y font-size.

Para algunas propiedades, el uso de longitudes negativas es un error de sintaxis, mientras que para algunas propiedades está permitido. Nótese que aunque los valores <percentage> también son dimensiones CSS y son aceptadas por algunas propiedades CSS que aceptan valores <length>, no son valores <length> en sí.

Interpolación

Los valores de tipo <length> pueden ser interpolados para permitir animaciones. En este caso son interpolados como números reales, de punto flotante. La interpolación sucede en el valor calculado. La velocidad de la interpolación es definida por la función <timing-function> asociada a la animación.

Unidades

Unidades de longitud relativa

Longitudes relativas a la fuente

em
Esta unidad representa el tamaño calculado de fuente (font-size) del elemento. Si se usa dentro de la propiedad font-size, representa el tamaño de fuente heredado por el elemento.
Esta unidad se usa por lo general para crear interfaces escalables, que mantengan el ritmo vertical de la página, aun cuando el usuario cambie el tamaño de las fuentes. Las propiedades CSS line-height, font-size, margin-bottom y margin-top generalemente tienen valores expresados en em.
ex
Esta unidad representa la altura de la x de la fuente (font) del elemento. En fuentes que incluyen la letra 'x', es generalmente la altura de letras minúsculas en la fuente; 1ex ≈ 0.5em en muchas fuentes.
ch
Esta unidad representa la anchura, o más precisamente, la medida de avance, del glifo '0' (cero, de caracter Unicode U+0030) en la fuente (font) del elemento.
rem
Esta unidad representa el tamaño (font-size) del elemento raíz (p.ej. el tamaño de fuente del elemento <html>). Cuando se aplica a font-size del elemento raíz, representa su valor inicial.
Esta unidad es práctica para crear interfaces perfectamente escalables. Si no es soportada por los navegadores, se puede recurrir a unidades em, aunque estas son ligeramente más complejas.

Longitudes de porcentaje del viewport

Las longitudes de porcentaje del viewport definen una longitud relativa al tamaño del viewport, que es la porción visible del documento. Solamente los navegadores basados en Gecko actualizan los valores del viewport dinámicamente, cuando el tamaño de éste es modificado (al cambiar el tamaño de la ventana en una computadora de escritorio, o al girar el dispositivo, en teléfonos y tablets).

En conjunto con overflow:auto, el espacio tomado por barras de desplazamiento no es restado al tamaño del viewport, mientras en el caso de overflow:scroll, sí lo es.

En un bloque de declaración de la regla-at @page, el uso de longitudes de viewport es inválido, y la declaración será desechada.

vh
1/100 de la altura del viewport.
vw
1/100 de la anchura del viewport.
vmin
1/100 del valor mínimo entre la altura y anchura del viewport.
vmax
1/100 del valor máximo entre la altura y anchura del viewport.

Unidades de longitud absoluta

Las unidades de longitud absoluta representan una medida física, y cuando las propiedades físicas del medio de salida son conocidas, como en diseño para impresión. Esto se hace anclando una de las unidades a una unidad física, y definiendo el resto con relación a ésta. La definición del ancla difiere entre dispositivos de baja resolución, como pantallas, y dispositivos de alta resolución, como impresoras.

Para dispositivos de ppp bajo, la unidad px representa el píxel de referencia físico, y el resto son definidos con relación a éste. Así, 1in es definido como 96px, que equivalen a 72pt. La consecuencia de esta definición es que en dichos dispositivos, las longitudes descritas en pulgadas (in), centrímetros (cm), milímetros (mm) no necesariamente conincidirán con la longitud de la unidad física del mismo nombre.

Para dispositivos de alto ppp, las pulgadas (in), centrímetros (cm), milímetros (mm) son definidos como su contraparte física. De esta forma, la unidad px es definida con relación a ellas (1/96 de 1 pulgada).

Los usuarios pueden incrementar el tamaño de fuente por razones de accesibilidad. Para permitir interfaces usables sin importar el tamao de fuente, use únicamente unidades de longitud absolutas cuando las características físicas del medio de salida son conocidas, como imágenes de mapa de bits. Al establecer longitudes relacionadas al tamaño de fuente, es preferible usar unidades relativas, como emrem.

px
Relativa al dispositivo de visualización.
Para pantallas, generalmente es el tamaño de un píxel (punto) de la pantalla del dispositivo.
Para impresoras y pantallas de muy alta resolución, un píxel CSS implica múltiples píxeles del dispositivo, de modo que el número de píxeles por pulgada se mantenga al rededor de 96.
mm
Un milímetro.
q
Un cuarto de milímetro (1/40° de centímetro).
cm
Un centímetro (10 milímetros).
in
Una pulgada (2.54 centímetros).
pt
Un punto (1/72° de pulgada).
pc
Una pica (12 puntos).
mozmm
Una unidad experimental que intenta generar exactamente un milímetro, sin importar el tamaño de resolución de la pantalla. Esto raramente será lo que se desea, pero podría ser útil para dispositivos móviles, en particular.

Unidades CSS y puntos por pulgada (dots-per-inch)

La unidad in no representa una pulgada física en pantalla, sino 96px. Esto significa que sin importar la densidad de píxeles real en pantalla, se asume que serán 96ppp. En dispositivos con mayor densidad de píxeles, 1in será menor que una pulgada física. De forma similar, mm, cm, y pt no son longitudes absolutas.

Algunos ejemplos específicos:

  • 1in siempre son 96px,
  • 3pt siempre son 4px,
  • 25.4mm siempre son 96px.

Especificaciones

Especificación Estado Comentarios
CSS Values and Units Module Level 3
The definition of '<length>' in that specification.
Candidate Recommendation Añadidos ch, rem, vw, vh, vmin, vmax y q
CSS Level 2 (Revision 1)
The definition of '<length>' in that specification.
Recommendation pt, pc, px son definidos explícitamente (fueron definidos implícitamente en CSS1)
CSS Level 1
The definition of '<length>' in that specification.
Recommendation Definición inicial

Compatibilidad de navegadores

 

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 1 1.0 (1.7 or earlier) 3.0 3.5 1.0
ch

27

1.0 (1.7 or earlier)[1] 9.0 20.0 7.0
ex (Yes) (Yes) ? ? ?
rem 4 (532.3) 3.6 (1.9.2) 9.0 11.6 4.1
vh, vw 20 19 (19) 9.0 20.0 6.0
vmin

20

19 (19) 9.0[2] 20.0 6.0
vmax 26 19 (19) No support 20.0 (Yes)
Longitudes de porcentaje del viewport inválidas en @page ? 21 (21) ? ? ?
mozmm No support 4.0 (2.0) No support No support No support
1in siempre es 96ppp (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)
q No support 49.0 (49.0) No support No support ?
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico (Yes) (Yes) (Yes) (Yes) (Yes)
ch No support (Yes) 7.8 ? 7.1.1
ex ? (Yes) ? ? ?
rem 2.1 (Yes) ? 12.0 4.0
vh, vw, vmin (Yes) 19.0 (19) ? No support 6.0
vmax 1.5 19.0 (19) ? No support 4.0
Longitudes de porcentaje del viewport inválidas en @page ? 21.0 (21.0) ? ? ?
q ? 49.0 (49.0) ? ? ?

[1] En Gecko 1.0-1.9.0 (Firefox 1.0-3.0) ch era la anchura de 'M', y no funcionaba para las propiedades CSS border-widthoutline-width.

[2] Internet Explorer implementa esto con el nombre no estándar vm.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: israel-munoz, fscholz, teoli, deibyod, Mgjbot, HenryGR
 Última actualización por: israel-munoz,