Unidades de Medida en CSS

2 minuto(s)

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.

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.