Unidades Relativas: em e rem
Dimensione elementos em relação aos tamanhos de fonte do elemento pai ou da raiz usando as unidades em e rem.
Unidades Relativas: em e rem é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O que são unidades relativas?
As unidades relativas são escaladas com base em outra medida, geralmente o tamanho da fonte de um elemento ou da raiz. Elas permitem criar projetos escaláveis e responsivos que respeitam as configurações do usuário.
em — relativo ao tamanho da fonte do elemento-pai
em é relativo ao tamanho da fonte do elemento atual (para o próprio tamanho da fonte) ou ao elemento-pai (para outras propriedades). Isso pode causar acúmulo.
<div class="parent">
Parent (20px)
<div class="child">
Child (1.5em = 30px)
<div class="grandchild">Grandchild (1.5em = 45px!)</div>
</div>
</div>
em para espaçamento
Quando em é usado para padding, margin ou border-radius, ele é relativo ao tamanho da fonte do próprio elemento. Isso cria componentes que escalam proporcionalmente.
<button class="button">Padded Button</button>
rem — relativo ao tamanho da fonte da raiz
rem (em raiz) é relativo ao tamanho da fonte do elemento raiz (html). Ele nunca se acumula e é previsível em toda a página.
<h1>Heading (2.5rem = 40px)</h1>
<p>Paragraph text (1rem = 16px)</p>
<small>Small print (0.75rem = 12px)</small>
rem e acessibilidade do usuário
Se o usuário aumentar o tamanho de fonte base do navegador (por exemplo, de 16px para 20px para facilitar a leitura), as unidades rem serão ajustadas de acordo. As unidades fixas px não serão. É por isso que rem é altamente recomendado para tipografia.
Tamanho da fonte de html em porcentagens
Defina o tamanho da fonte da raiz como uma porcentagem para respeitar as configurações do navegador do usuário:
<p>Root font-size respects the browser/user default (100%).</p>
Escolhendo entre em e rem
Guia prático:
- Use
rempara tamanhos de fonte, variáveis de espaçamento e medidas de layout - Use
empara o espaçamento interno de componentes que deve escalar com o tamanho da fonte do componente (por exemplo, o espaçamento interno de um botão)
em em consultas de mídia
As consultas de mídia especificadas em em respondem às alterações no tamanho da fonte do navegador. Um ponto de interrupção de 48em = 768px nas configurações padrão, mas ele se adapta se o usuário tiver alterado o tamanho de fonte base.
<div class="layout">
<div>Column A</div>
<div>Column B</div>
</div>
Calculando em
A fórmula: desired px / parent px = em value. Se o elemento-pai tiver 16px e você quiser um texto de 24px: 24/16 = 1.5em.
<h2>Heading (24px via 1.5rem)</h2>
<p>Paragraph (18px via 1.125rem)</p>
Problema do acúmulo de em
Aninhar elementos com tamanho em faz com que o tamanho da fonte se acumule multiplicativamente. É por isso que rem é preferido para o tamanho da fonte: ele sempre faz referência à raiz, evitando o acúmulo.
ch — Largura do caractere
A unidade ch equivale à largura do caractere 0 na fonte atual. É útil para limitar os contêineres de texto a comprimentos de linha legíveis:
<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>
Verificação rápida
Um botão tem font-size: 1.25rem e padding: 0.5em. Se o tamanho da fonte da raiz for 16px, qual será o espaçamento interno em pixels?
Recapitulação
em escala em relação ao tamanho da fonte do elemento atual (ou ao elemento-pai, para o próprio tamanho da fonte), portanto pode se acumular. rem sempre escala em relação à raiz e nunca se acumula. Use rem para tipografia e espaçamento global; use em para o espaçamento interno proporcional dos componentes.
Aprenda CSS com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 40
- Aulas
- 159
Perguntas Frequentes
A aula “Unidades Relativas: em e rem” é grátis?
Sim — o texto completo de “Unidades Relativas: em e rem” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Unidades Relativas: em e rem”?
Dimensione elementos em relação aos tamanhos de fonte do elemento pai ou da raiz usando as unidades em e rem. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Unidades Relativas: em e rem”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Unidades Absolutas: px, pt e cm
- Unidades Relativas: em e rem
- Unidades da Janela de Visualização: vw, vh e dvh
- Funções Min, Max e Clamp