Podem ser divididas em 2 grupos: unidades relativas e unidades absolutas.

🪗 Unidades Relativas


São, como o nome diz, relativas a outro valor.

Porcentagem (%)

É sempre relativa a outro valor. Às vezes, ao elemento pai e, outras vezes, a alguma dimensão do próprio elemento.

Para width, height e margin a porcentagem é relativa ao elemento pai. Já a line-height é relativa ao font-size do próprio elemento.

Root em (rem)

É relativo ao font-size do elemento HTML raiz (<html>).

Geralmente é mais fácil de trabalhar.

Se o elemento HTML raiz tem um font-size de 20px, então 1rem é sempre 20px, 2rem = 40 px, …

em

1em equivale a uma vez o font-size do elemento pai.

Com outras propriedades, 1em é igual ao font-size computado do próprio elemento (considera-se um valor absoluto).

vw e vh