Unidades de Medida en CSS

2 minuto(s)

En esta página:

En CSS existen muchas unidades para definir una longitud, los valores de una longitud pueden ser ancho, margen, relleno, tamaño de fuente, ancho de un borde, alto entre otros, si eres diseñador Frontend es importante que sepas cuales son las unidades de medida que puedes usar en CSS, en este artículo compartiremos contigo dichas unidades de medida, vayamos al artículo.

En CSS existen básicamente 2 tipos de unidades de medida que son Relativas y Absolutas

Unidades de Medida Relativas

Este tipo de unidades de medida determinan una medida que es relativa a otra propiedad de medición, este tipo de unidad de medida es escalable entre diferentes medios de representación, a continuación puedes ver los tipos de unidades de medida relativas y como dependen de otros factores

Unidad	Descripción
em	Relativo al tamaño de la fuente del elemento (2em significa 2 veces el tamaño de la fuente actual)
ex	Relativo a la altura x de la fuente actual (rara vez se utiliza)
ch	Relativo al ancho de 0
rem	Relativo al tamaño de la fuente del elemento raíz
vw	Relativo al 1% del ancho de la pantalla
vh	Relativo al 1% del alto de la pantalla
vmin	Relativo al 1% de la dimensión mínima de la pantalla
vmax	Relativo al 1% de la dimensión máxima de la pantalla
%	Relativo a los elementos padres

Unidades de Medida Absolutas

Este tipo de unidades en CSS son fijas cuando son aplicadas a los elementos HTML, no es recomendable usar una unidad de medida fija para los anchos, ya que las pantallas de los dispositivos varían mucho, puedes usar media queries para tal caso, a continuación puedes ver los tipos de unidades de medida absoluta con una pequeña descripción

Unidad	Descripción
cm	centímetros
mm	milímetros
in	pulgadas (1in = 96px = 2.54cm)
px *	pixeles (1px = 1/96th of 1in)
pt	puntos (1pt = 1/72 of 1in)
pc	picas (1pc = 12 pt)

Notas

Todos los Navegadores Modernos soportan las unidades de medidas mencionadas en este artículo.
Algunas propiedades soportan valores negativos, por ejemplo margin: -10px por eso debes de tener cuidado al utilizarlas.