Unidades de medidas CSS

visualizações (desde 30/05/2016) Publicado em: 04/04/2004 — Atualizado em: ➠ 30/05/2016

Introdução

As unidades de medidas CSS são classificadas em dois grupos conforme mostrados a seguir:

Unidades de medidas de distância <length>

Medidas relativas
Para fontes: unidades em, ex, ch, rem
Porcentagem da viewport: unidades vw, vh, vmin, vmax
A especificação do W3C classifica tecnicamente a porcentagem (%) como tipo de dado e não unidade de medida.
Medidas absolutas
Unidades cm, mm, q, in, pt, pc, px

Unidades de medidas para outras quantidades

Outras quantidades
Ângulos: unidades: deg, grad, rad, turn
Duração: unidades s, ms
Frequência: unidades Hz, kHz
Resolução: unidades dpi, dpcm, dppx

Unidades de medidas de distância <length>

As unidades de medida de distância definem medidas na horizontal, na vertical ou em qualquer direção.

A sintaxe para se declarar o valor de uma unidade de medida de distância é composta por um número inteiro ou decimal imediatamente precedido do sinal '+' (mais) ou do sinal '-' (menos) — o sinal '+' (mais) é o padrão — imediatamente seguido por uma unidade de medida CSS válida (por exemplo: px, em, deg, s, dpi, vw, etc).

A unidade de medida é opcional quando se declara o valor '0' (zero).

Algumas das propriedades CSS permitem que sejam declarados valores negativos para unidades de medida.

Medidas de distância relativas

São medidas calculadas em relação a uma outra unidade de medida. Usar unidades de medidas relativas é mais apropriado para se obter ajustes em diferentes tipos de mídia. (por exemplo: ajustar de uma tela de monitor para uma impressora laser).

O valor é tomado em relação:

  • em: ...ao tamanho da fonte ('font-size') do elemento no qual a unidade é declarada;
  • ex: ...a altura da letra x (xis) da fonte herdada;
  • ch: ...a largura acrescida do espaçamanto em volta do número 0 (zero) da fonte do elemento no qual a unidade é declarada;
  • rem: ...ao tamanho da fonte ('font-size') do elemento raiz do documento.

O valor é igual a:

  • vw: 1% da largura da viewport;
  • vh: 1% da altura da viewport;
  • vmin: a menor medida entre vw e vh;
  • vmax: a maior medida entre vw e vh.
Medidas de distância absolutas

São medidas que não estão referenciadas a qualquer outra unidade. São as unidades de medida de comprimento definidas nos sistemas de medidas pela física, tais como, centímetro, polegada, etc... e a unidade pixel para o ângulo visual. São indicadas para serem usadas quando as mídias de exibição são perfeitamente conhecidas.

  • cm - centímetro: 96px/2.54;
  • mm - milímetro: 1/10cm;
  • q - 1/4 do milímetro: 1/40cm;
  • in - polegada: 2,54cm = 96px;
  • pc - pica: 12 points ou 1/6in;
  • pt - point: 1/72in;
  • px - pixel: 1/96in;

Unidades de medidas para outras quantidades

Outras quantidades
Ângulos: unidades: deg, grad, rad, turn
Duração: unidades s, ms
Frequência: unidades Hz, kHz
Resolução: unidades dpi, dpcm, dppx
Unidades para ângulos
  • deg - grau: um círculo tem 360deg;
  • grad - grado: um círculo tem 400grad;
  • rad - radiano: um círculo tem 2𝛑rad;
  • turn - volta: um círculo tem 1turn;
Unidades de duração
  • s - segundo: 1s;
  • ms - milissegundo: 1/1000s;
Unidades para frequência
  • Hz - Hertz: número de ocorrências por segundo;
  • kHz - KiloHertz: 1000Hz;
Unidades para resolução
  • dpi - dots per inch: pontos por polegada;
  • dpcm - dots per centimeter: pontos por centímetro;
  • dppx - dots per pixel: pontos por pixel;

Observe a seguir exemplos de declaração usando medidas CSS.

div { margin: 1.5em; } 
h4 { margin: 2ex; } 
p { font-size: 14px; }
.classe { padding: 90%; }
hr { width: 14pt; } 
h1 { margin: 1pc; } 
h2 { font-size: 4mm; }
p.classe { padding: 0.3cm; }
h5.classe { padding: 0.5in; }
@media ( min-resolution: 2dppx ) { ... }
background-image: linear-gradient( 45deg, white, black );
div { width: 50vw; }