Unidades CSS
CSS tiene varias unidades diferentes que se utilizan para representar longitudes.
Algunas propiedades que establecen longitudes en CSS son width, margin, padding, font-size, border-width, etc.
Una longitud se compone de un número y una unidad, como 10px, 2em, etc.
No debe haber espacios entre el número y la unidad. Si el valor de la longitud es 0, la unidad puede omitirse.
Para algunas propiedades CSS, la longitud puede ser negativa.
Hay dos tipos de unidades de longitud: relativas y absolutas.
Soporte del navegador
Los números en la siguiente tabla indican la versión mínima del navegador que admite esa unidad de longitud.
| Unidad de longitud | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | No compatible | 19.0 | No compatible | 20.0 |
Nota:Internet Explorer 9 admite vmin mediante el nombre no estándar vm.
Longitudes relativas
Las unidades de longitud relativa especifican una longitud relativa a otra longitud. Las longitudes relativas son más adecuadas para diferentes dispositivos.
| Unidad | Descripción | Ejemplo en línea |
|---|---|---|
| em | Describe el tamaño de fuente relativo al elemento actual, por lo que también es una unidad de longitud relativa. Generalmente, el tamaño de fuente predeterminado del navegador es 16px, por lo que 2em == 32px; | Pruébalo |
| ex | Depende de la altura de la letra minúscula 'x' del alfabeto inglés. | Pruébalo |
| ch | El ancho del dígito 0. | |
| rem | rem es la abreviatura de root em (em raíz). Cuando rem se aplica a un elemento no raíz, es relativo al tamaño de fuente del elemento raíz; cuando rem se aplica al tamaño de fuente del elemento raíz, es relativo a su tamaño de fuente inicial. | Pruébalo |
| vw | Viewport Width, ancho de la ventana gráfica, 1vw = 1% del ancho de la ventana gráfica. | Pruébalo |
| vh | Viewport Height, altura de la ventana gráfica, 1vh = 1% de la altura de la ventana gráfica. | Pruébalo |
| vmin | El menor de vw y vh. | Pruébalo |
| vmax | El mayor de vw y vh. | Pruébalo |
| % |
 |
Consejo:¿Cuál es la diferencia entre rem y em? La diferencia es que al usar rem para establecer el tamaño de fuente de un elemento, sigue siendo un tamaño relativo, pero relativo únicamente al elemento raíz HTML. |
|---|
Longitudes absolutas
Las unidades de longitud absoluta son un valor fijo que refleja un tamaño físico real. Las unidades de longitud absoluta dependen del medio de salida y no dependen del entorno (monitor, resolución, sistema operativo, etc.).
| Unidad | Descripción | Ejemplo en línea |
|---|---|---|
| cm | Centímetros | Pruébalo |
| mm | Milímetros | Pruébalo |
| in | Pulgadas (1in = 96px = 2.54cm) | Pruébalo |
| px * | Píxeles (1px = 1/96 de 1in) | Pruébalo |
| pt | punto, aproximadamente 1/72 de pulgada; (1pt = 1/72in) | Pruébalo |
| pc | pica, aproximadamente 12pt, 1/6 de pulgada; (1pc = 12 pt) | Pruébalo |
El píxel quizás se considera el mejor "píxel de dispositivo", pero esta longitud de píxel no tiene relación con los píxeles de pantalla del texto que ves en el monitor. px en realidad es una unidad que se mide según el ángulo.
Otras extensiones