CSS tiene varias unidades diferentes para expresar una longitud. Muchas propiedades CSS toman valores de «longitud», como width, margin, padding, fontsize…
Ejm
Establece distintos valores de longitud expresados en pixeles
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Nota: No puede aparecer un espacio en blanco entre el número y la unidad. Sin embargo, si el valor es 0, se puede omitir la unidad.
Para algunas propiedades de CSS, se permiten longitudes negativas. Hay dos tipos de unidades de longitud: absolutas y relativas.
Longitudes absolutas
Las unidades de longitud absoluta son fijas y una longitud expresada en cualquiera de ellas aparecerá exactamente como ese tamaño.
Las unidades de longitud absoluta no se recomiendan para usar en pantalla, porque los tamaños de pantalla varían mucho. Sin embargo, se pueden utilizar si se conoce el medio de salida, por ejemplo, para el diseño de impresión.
| Unidad | Descripción |
|---|---|
| cm | centímetros |
| mm | millímetros |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixeles (1px = 1/96th of 1in) |
| pt | points / puntos (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
Longitudes relativas
Las unidades de longitud relativa especifican una longitud relativa a otra propiedad de longitud. Las unidades de longitud relativa escalan mejor entre diferentes medios de representación.
| Unidad | Descripción | |
|---|---|---|
| em | Relativo al tamaño de fuente del elemento (2em significa 2 veces el tamaño de la fuente actual) | |
| ex | En relación con la altura x de la fuente actual (rara vez se usa) | |
| ch | Relativo al ancho del «0» (cero) | |
| rem | Relativa al tamaño de fuente del elemento raíz | |
| vw | Relativa al 1% del ancho de la ventana gráfica * | |
| vh | Relativa al 1% de la altura de la ventana gráfica * | |
| vmin | Relativa al 1% de la dimensión más pequeña de la ventana gráfica | |
| vmax | Relativa al 1% de la dimensión más grande de la ventana gráfica | |
| % | Relativo al elemento padre |