Middle+

Qual é a diferença entre rem e em?

sobes.tech IA

Resposta da IA

rem e em são unidades relativas de medida em CSS, usadas para definir tamanhos, mas diferem na base de referência.

em — uma unidade relativa baseada no tamanho da fonte do elemento pai. Por exemplo, se o tamanho da fonte do pai for: 16px, então 1em = 16px. Se num elemento filho o tamanho da fonte for: 1.5em, o seu tamanho será 24px.
rem — uma unidade relativa baseada no tamanho da fonte do elemento raiz (geralmente <html>). Por exemplo, se <html> tiver um tamanho de fonte: 16px, então 1rem é sempre igual a 16px, independentemente da aninhagem.

Diferença principal:

em depende do contexto (do elemento pai), o que pode levar a uma cascata na multiplicação de tamanhos na aninhagem.
rem é sempre fixo em relação à raiz, o que simplifica a gestão de tamanhos e torna-os mais previsíveis.

Exemplo:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px dentro de .parent */
}

.child-em {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

.child-rem {
  font-size: 1.5rem; /* 1.5 * 16px = 24px */
}

Use rem para tamanhos globais para evitar mudanças inesperadas, e em quando precisar escalar relativamente ao contexto local.

Anterior Próximo