Um vasto conjunto de propriedades pode receber valores numéricos. São exemplos width, height, margin, padding, border e muitas outras. No CSS temos dois grupos básicos de valores que podem ser utilizados dessa maneira, as unidades de valor absoluto e relativo.
Valores
As unidades de comprimento absoluto não recebem influência de outros fatores quanto ao cálculo do seu comprimento. Ao utilizá-las, o tamanho final computado corresponde exatamente ao valor declarado.
São exemplos de valores absolutos:
| cm | centímetros |
| mm | milímetros |
| in | polegadas |
| px | pixels |
| pt | pontos |
| pc | paica |
As unidades de comprimento relativo têm seu comprimento final afetado por outros fatores. Elas são utilizadas quando precisamos escalar as dimensões do elemento.
Por exemplo, se desejamos que um texto dos parágrafos da página tenham 14 pixels, exceto quando estiverem em um determinado container, podemos fazer o seguinte:
html { font-size: 14px; }
.container { font-size: 2em }
Neste exemplo, o texto da página terá uma altura de 14 pixels, contudo quando dentro do elemento de classe container seu tamanho será duas vezes esse valor.
São exemplos de valores relativos:
| em | 1em é uma vez o font-size do elemento |
| rem | 1rem é uma vez o font-size do elemento acima na hierarquia de elementos |
| vw | 1vw é 1% da largura da janela do navegador |
| vh | 1vh é 1% da altura da janela do navegador |
| vmin | 1vmin é 1% da menor dimensão da janela do navegador |
| vmax | 1vmax é 1% da maior dimensão da janela do navegador |
| % | calcula o tamanho relativo ao elemento pai |
