Quando você começa a aprender CSS, uma das primeiras dúvidas que aparece é: qual unidade de medida usar?
E pode acreditar: isso é muito mais importante do que parece!

Cada unidade — px, %, em e rem — funciona de um jeito diferente, e entender como elas influenciam no tamanho de textos, margens, larguras e espaçamentos vai transformar totalmente a forma como você cria suas páginas.

Hoje vamos aprender tudo isso de forma simples, prática e direta, como se estivéssemos lado a lado codando juntos.
Prepare-se: esse é um daqueles conteúdos que fazem o famoso “click” na cabeça do iniciante. ????

O Que São Unidades de Medida no CSS?

As unidades de medida são valores que você usa para definir tamanhos de praticamente tudo no CSS:

Tamanho de fonte

Largura e altura de elementos

Margens e paddings

Bordas

Ícones

E muito mais!

Elas funcionam como referências para dizer ao navegador “quão grande isso deve ser”.
Mas existe um detalhe importante: algumas unidades são fixas e outras se adaptam ao tamanho da tela ou do elemento pai.

Vamos ver isso agora!

Unidades Absolutas vs Unidades Relativas

Antes de olhar para cada unidade, você precisa saber:

Unidades absolutas → sempre têm o mesmo tamanho, independente do contexto.

Unidades relativas → dependem do tamanho de outro elemento.

No CSS moderno, combinamos as duas.
Agora sim, vamos para o que interessa.

1. px — A Unidade Fixa do CSS

O que é?

px significa pixel, e representa um ponto fixo na tela.

Se você define:

p {  
	font-size: 16px; 
}

Esse texto terá sempre 16px, independente do tamanho da tela.

Quando usar px

✔ Em ícones
✔ Bordas
✔ Elementos decorativos pequenos
✔ Quando você quer precisão e tamanho fixo

Quando evitar

❌ Em textos
❌ Em layouts totalmente responsivos

Exemplo prático

.box {  
	width: 200px;  
	height: 100px;  
	border: 2px solid #333; 
}

2. % — A Unidade Relativa ao Elemento Pai

O que é?

A porcentagem sempre depende do tamanho do elemento pai.

Se você usar:

div {  
	width: 50%; 
}

Esse div ocupará metade da largura do elemento em que ele está dentro.

Quando usar %

✔ Larguras responsivas
✔ Imagens fluidas
✔ Elementos que precisam se ajustar ao espaço disponível

Quando evitar

❌ Em fontes
❌ Em cálculos de tamanhos muito específicos

Exemplo prático

.container {  
	width: 100%; 
} 
.card {
	width: 50%; 
}

3. em — Relativa ao Tamanho da Fonte do Pai

O que é?

em é baseado no font-size do elemento pai.

Se o pai tem font-size: 20px, então:

1em = 20px

2em = 40px

0.5em = 10px

Quando usar em

✔ Em componentes que precisam crescer junto com a fonte
✔ Espaçamentos internos (padding) que acompanham a escala
✔ Botões que aumentam automaticamente se o texto aumentar

Quando evitar

❌ Em elementos muito aninhados (pode gerar efeito “bola de neve”)
❌ Quando você quer previsibilidade total

Exemplo prático

 
button {  
	font-size: 1em;     /* igual ao pai */  
	padding: 0.5em 1em; /* cresce junto com a fonte */ 
}

4. rem — Relativo ao Tamanho da Raiz (HTML)

O que é?

rem significa root em, e é baseado no font-size do elemento <html>.

Por padrão, o navegador usa:

1rem = 16px

Ou seja, é mais previsível que o em, pois sempre depende do mesmo lugar.

Quando usar rem

✔ Títulos
✔ Parágrafos
✔ Margens e paddings
✔ Layouts modernos e responsivos
✔ Design Systems

Quando evitar

❌ Raramente você evitará rem — ela é super confiável.

Exemplo prático

h1 {  
	font-size: 2rem; /* geralmente 32px */ 
} 
p {  
	font-size: 1rem; /* geralmente 16px */ 
}

⚔️ Comparação Direta: px vs % vs em vs rem

UnidadeTipoBaseIdeal para
pxAbsolutaPixel fixoBordas, ícones, detalhes
%RelativaTamanho do paiLarguras flexíveis
emRelativaFonte do paiBotões e componentes escaláveis
remRelativaFonte do HTMLTextos, espaçamentos e layout moderno

Exemplo Prático Combinação na Vida Real

Imagine um card simples:

.card {
  width: 80%;
  padding: 1.5rem;
  border-radius: 8px;
}

.card h2 {
  font-size: 2rem;
}

.card p {
  font-size: 1rem;
}

.icon {
  width: 24px; /* px */
}

Veja o que acontece:

A largura acompanha a tela → %

Textos ficam proporcionais → rem

Ícone tem tamanho fixo → px

Essa combinação é muito comum em sites profissionais.

Qual Unidade Devo Usar?

Aqui vai um guia rápido e prático:

Textos: rem

Larguras responsivas: %

Espaçamentos internos/externos: rem

Ícones e bordas: px

Componentes escaláveis: em

Simples, direto e funcional. ✔️

Erros Comuns de Iniciantes

❌ Usar px em tudo
❌ Não entender que % depende do elemento pai
❌ Usar em em elementos aninhados e causar efeito multiplicador
❌ Esquecer que rem depende do font-size do HTML

Esses ajustes já vão melhorar instantaneamente seu CSS.

Quer Aprender Ainda Mais CSS?

???? Veja nossa categoria completa com vários posts simples, diretos e feitos para iniciantes:
https://vivendodeprogramacao.com.br/categoria/css-3

Conclusão

Agora você já entende como funcionam as principais unidades de medida do CSS — px, %, em e rem — e quando usar cada uma delas para criar páginas mais bonitas, organizadas e responsivas.

Dominar isso é um passo enorme no caminho para escrever CSS de verdade!
A prática vai fazer tudo ficar ainda mais claro no seu dia a dia.

Perguntas Frequentes (FAQ)

1. Qual é a melhor unidade para texto?
Normalmente rem, porque é mais previsível e acessível.

2. Por que meu elemento com % não ficou do tamanho que eu queria?
Provavelmente porque o tamanho do pai influencia diretamente.

3. Usar px é errado?
Não! Apenas não é ideal para textos e layouts totalmente responsivos.

4. Posso usar em no lugar de rem?
Pode, mas entenda que o valor vai depender do elemento pai e pode crescer demais.

5. rem funciona em todos os navegadores?
Sim, é amplamente suportado.

6. 1rem sempre vale 16px?
Só se o HTML estiver com font-size padrão. Você pode alterar isso.

7. Preciso escolher apenas uma unidade no projeto?
Não! Projetos profissionais combinam várias unidades ao mesmo tempo.