Unidades CSS
Los estilos CSS tienen diferentes unidades para establecer la longitud.
Muchas propiedades CSS toman valores de longitud, como el ancho, el margen, el relleno, tamaño de fuente, ancho de borde, etc.
La longitud es un número seguido de la unidad, como 10px, 2em, etc.
No puede haber un espacio en blanco entre el número y la unidad. Sin embargo, si el valor es 0, la unidad puede ser omitida.
Para algunas propiedades CSS, longitudes en negativo son permitidos.
Hay dos tipos de unidades: absolutas y relativas.
Unidades Absolutas
Las unidades absolutas son fijas y una longitud expresada en cualquiera de ellas aparecerá exactamente como ese tamaño.
No se recomienda el uso de unidades absolutas para pantalla, ya que los tamaños de pantalla varían mucho. Sin embargo, se pueden usar si se conoce el medio de salida, por ejemplo, para el diseño de la impresión.
| Unidad | Descripción | Equivalencia |
|---|---|---|
| cm | centímetros | |
| mm | milímetros | |
| in | pulgadas | 1in = 96px = 2.54cm |
| px | pixeles | 1px = 1/96 de 1in |
| pt | puntos | 1pt = 1/72 de 1in |
| pc | picas | 1pc = 12pt |
Nota:Los pixeles son relativos a la pantalla del dispositivo desde donde se visualiza. Para un dispositivo de bajo dpi, 1px es un pixel de la pantalla del dispositivo (un punto). Para impresión y pantallas de alta resolución implica múltiples pixeles del dispositivo.
Unidades Relativas
Las unidades relativas especifican una longitud relativa a otra propiedad de longitud. Las unidades de longitud relativa escala mejor entre los diferentes tamaños de pantallas o dispositivos.
| Unidad | Descripción |
|---|---|
| em | Relativo al font-size de la etiqueta (2em significa 2 veces el tamaño de la fuenta actual). |
| ex | Relativo al x-height de la fuente actual (rara vez usada). |
| ch | Relativo al ancho de 0. |
| rem | Relativo al font-size de la etiqueta raiz. |
| vw | Relativo al 1% de el ancho de la ventana. |
| vh | Relativo al 1% de la altura de la ventana. |
| vmin | Relativo al 1% de la dimensión menor de la ventana. |
| vmax | Relativo al 1% de la dimensión mayor de la ventana. |
| % | Relativo a la etiqueta que lo contiene. |