INDICAÇÕES DE TAMANHO - EM, PX, PT, CM, IN

Unidades de Medida no CSS

Quando aplicamos estilos em CSS (como bordas, margens, tamanhos de fonte, altura e largura), geralmente precisamos informar um valor numérico + unidade.

🔹 Exemplo:

font-size: 16px;

margin: 20px;

width: 50%;

Regras importantes:

Não existe unidade “padrão” no CSS → sempre precisa informar unidade.
Exceção: o valor 0 não precisa de unidade (margin: 0;).

As medidas podem ser divididas em dois grandes grupos:

Medidas Absolutas (fixas)
Medidas Relativas (dependem de outro contexto)

1. Medidas Absolutas

São fixas e não dependem do dispositivo. Servem mais para impressão ou casos muito específicos.

Principais unidades absolutas:

px (pixels)
Unidade mais usada no design web.

font-size: 18px;

pt (points/pontos tipográficos)
Usado em tipografia, comum em impressão.

font-size: 12pt; /* impressão */

in (inches/polegadas), cm (centímetros), mm (milímetros), pc (paica)
Mais comuns em impressão do que em telas.

width: 10cm;

📌 Relação entre unidades absolutas:
1in = 2.54cm = 25.4mm = 72pt = 6pc

2. Medidas Relativas

Mais usadas no design responsivo, pois se adaptam ao contexto do dispositivo.

Principais unidades relativas:

em → relativo ao tamanho da fonte do elemento pai.

font-size: 2em; /* 2x o tamanho da fonte do pai */

rem (root em) → relativo ao tamanho da fonte do elemento raiz (html).

html { font-size: 16px; }

p { font-size: 1.5rem; } /* 24px */

% (porcentagem) → relativo ao elemento pai.

width: 50%; /* metade da largura do elemento pai */

ex → relativo à altura do caractere “x” da fonte usada (mais raro).

line-height: 2ex;

ch → relativo à largura do caractere “0” da fonte atual.

width: 40ch; /* largura suficiente para ~40 caracteres */

vw (viewport width) → relativo à largura da tela do usuário.

width: 100vw; /* ocupa toda a largura da tela */

vh (viewport height) → relativo à altura da tela.

height: 100vh; /* ocupa toda a altura da tela */

vmin → relativo à menor dimensão da tela (altura ou largura).

font-size: 5vmin;

vmax → relativo à maior dimensão da tela.

font-size: 5vmax;

Comparação rápida

Absolutas: px, pt, cm, mm, in, pc / Impressão, ajustes fixos

Relativas: em, rem, %, ex, ch, vw, vh, vmin, vmax / Web responsiva e acessível