Todas as unidades CSS: absolutas, relativas à fonte, relativas ao viewport, as funções fluidas e as unidades de ângulo, tempo e resolução — o que cada uma mede e quando a escolher.
As unidades absolutas (px, pt) mantêm um tamanho fixo independentemente do contexto; as relativas (rem, vw, %) escalam segundo um valor de referência. Prefira rem para tamanhos de fonte: respeita a definição de tamanho base do utilizador, pelo que a sua tipografia honra a preferência de acessibilidade dele. Use clamp() para tipografia fluida que cresce e encolhe com o viewport sem nunca cruzar um limite mínimo ou máximo.
Tabela de referência · 38 entradas
Unidades CSSExplained
38 of 38 rows
Absolutas
1/96 de polegada (o pixel de referência CSS).
Tamanhos fixos de UI: bordas, linhas finas, dimensões de ícones.
border: 1px solid #000;
1/72 de polegada (1pt = 1,333px).
Folhas de estilo de impressão, onde os tamanhos mapeiam para papel físico.
font-size: 12pt;
1 centímetro (≈37,8px).
Esquemas de impressão que precisam de medidas reais.
margin: 2cm;
1 milímetro (≈3,78px).
Medidas de impressão finas.
padding: 5mm;
1 polegada (96px = 2,54cm).
Esquemas de impressão medidos em polegadas.
margin: 1in;
Relativas à fonte
O font-size do próprio elemento (herdado do pai).
Espaçamento que escala junto com o texto envolvente.
padding: 1em;
O font-size do elemento raiz (o elemento html).
Tamanhos de fonte: respeita a definição de tamanho base do utilizador.
font-size: 1.25rem;
A largura de avanço do glifo '0' na fonte atual.
Definir um comprimento de linha legível (caracteres por linha).
max-width: 70ch;
A altura do x da fonte atual (altura do 'x' minúsculo).
Métricas verticais ligadas ao tipo de letra.
line-height: 2ex;
A altura das maiúsculas da fonte atual (altura de uma letra capital).
Métricas verticais dimensionadas para maiúsculas, mais justas que ex.
padding-top: 0.5cap;
A largura de avanço do ideograma '水' (água) na fonte atual.
Dimensões que acompanham uma célula de carácter CJK.
width: 4ic;
O line-height calculado do próprio elemento.
Dimensionar elementos em linhas inteiras de texto.
height: 3lh;
O line-height do elemento raiz.
Espaçamento em múltiplos da altura de linha base do documento.
margin-block: 2rlh;
Relativas ao viewport
O valor do pai para a mesma propriedade.
Esquemas fluidos dimensionados pelo elemento contentor.
width: 50%;
1% da largura do viewport.
Secções full-bleed dimensionadas pela largura do ecrã.
width: 100vw;
1% da altura do viewport.
Secções hero ou overlays que cobrem a altura do ecrã.
height: 100vh;
1% da dimensão menor do viewport.
Dimensionar elementos para caber no ecrã em qualquer orientação.
font-size: 5vmin;
1% da dimensão maior do viewport.
Preencher o eixo dominante do viewport.
font-size: 5vmax;
1% da altura pequena do viewport (UI do navegador totalmente visível).
Secções de altura total em móvel que cabem acima do chrome expandido do navegador.
height: 100svh;
1% da altura grande do viewport (UI do navegador oculta).
Fundos que têm de cobrir o ecrã mesmo quando o chrome do navegador colapsa.
height: 100lvh;
1% da altura dinâmica do viewport, acompanhando a UI do navegador.
A correção móvel para 100vh: a altura redimensiona à medida que o chrome aparece.
height: 100dvh;
1% da largura pequena do viewport.
Contraparte em largura de svh para o estado mais estreito do viewport.
width: 100svw;
1% da largura grande do viewport.
Contraparte em largura de lvh para o estado mais largo do viewport.
width: 100lvw;
1% da largura dinâmica do viewport, acompanhando a UI do navegador.
Contraparte em largura de dvh quando o viewport redimensiona com o chrome.
width: 100dvw;
1% do tamanho do viewport ao longo do eixo inline (largura em modos de escrita horizontais).
Dimensionamento pelo viewport que segue a direção de escrita.
width: 50vi;
1% do tamanho do viewport ao longo do eixo block (altura em modos de escrita horizontais).
Dimensionamento pelo viewport que se mantém correto em modos de escrita verticais.
height: 50vb;
Fluidas
Um valor preferido limitado por um mínimo e um máximo.
Tipografia fluida que nunca cruza um limite mínimo ou máximo.
width: clamp(320px, 80vw, 1100px);
O menor dos seus argumentos separados por vírgulas.
Limitar um tamanho para nunca exceder um máximo.
width: min(100%, 600px);
O maior dos seus argumentos separados por vírgulas.
Garantir um tamanho mínimo que cresce com o viewport.
width: max(50%, 300px);
Ângulo
1/360 de um círculo completo.
Transformações de rotação e posições de ângulo em gradientes.
transform: rotate(45deg);
Radianos; 1rad ≈ 57,2958deg.
Ângulos calculados a partir de matemática, como transformações geradas.
transform: rotate(1.5708rad);
Gradianos; 400grad = um círculo completo.
Valores de ângulo legados ou de agrimensura.
transform: rotate(100grad);
1turn = um círculo completo de 360°.
Rotações inteiras ou meias voltas que se leem à primeira vista.
transform: rotate(0.5turn);
Tempo
Um segundo.
Durações de animação e transição.
transition: opacity 0.3s;
Um milissegundo (1s = 1000ms).
Animações curtas de feedback de UI e atrasos.
animation-duration: 150ms;
Resolução
Pontos por polegada da saída.
Media queries de resolução orientadas à impressão.
@media (min-resolution: 300dpi)
Pontos por unidade px; 1dppx equivale a um ecrã padrão de 96dpi.
Media queries para Retina e ecrãs de alta densidade.