Referência de unidades CSS
As unidades de comprimento CSS vêm em duas famílias: unidades absolutas fixadas a um tamanho físico, e unidades relativas que escalam com a fonte, o pai ou a viewport. Para design responsivo você usará principalmente as relativas — especialmente rem, % e as unidades de viewport.
Atualizado 2026-07-06
Unidades absolutas
| Unidade | Significado |
|---|---|
| px | Pixels — a unidade base para telas. 1px é um pixel independente de dispositivo. |
| pt | Pontos — 1/72 polegada. Comum em folhas de estilo de impressão. |
| in | Polegadas — 1in = 96px = 2,54cm. |
| cm | Centímetros — sobretudo para impressão. |
| mm | Milímetros — sobretudo para impressão. |
| pc | Paicas — 1pc = 12pt = 1/6 polegada. Rara. |
Unidades relativas
| Unidade | Significado |
|---|---|
| % | Porcentagem do valor correspondente do elemento pai. |
| em | Relativo ao próprio tamanho de fonte do elemento. 1.5em = 1,5× o tamanho da fonte. |
| rem | Relativo ao tamanho de fonte da raiz (html). Previsível para escala consistente. |
| ex | A altura x da fonte atual (raramente usada). |
| ch | A largura do caractere '0' na fonte atual. |
| vw | 1% da largura da viewport. |
| vh | 1% da altura da viewport. |
| vmin | 1% da menor dimensão da viewport (largura ou altura). |
| vmax | 1% da maior dimensão da viewport. |
| fr | Uma fração do espaço livre em um contêiner CSS Grid. |
em vs. rem: a distinção-chave
Ambas escalam com o tamanho da fonte, mas em é relativa ao tamanho de fonte do elemento atual (então acumula através de elementos aninhados), enquanto rem é sempre relativa ao tamanho de fonte da raiz (então permanece previsível não importa quão aninhado). Na dúvida, rem para tamanhos e espaçamentos traz menos surpresas.
Ferramentas relacionadas