PX2REM .COM
Pollo AI

All in one AI tool.
em para px

Veja como as unidades em se acumulam em elementos aninhados. Insira um valor em e tamanho de fonte base para visualizar o efeito em cascata em cada nível de aninhamento.

Como usar 📢 Master the core languages: JavaScript, HTML, CSS, and Python
Tamanho de fonte base:
Níveis de aninhamento:
Digite um valor em para ver como ele se acumula em cada nível de aninhamento

Sequência de aninhamento EM (16px × 2em)

Nível de aninhamentoValor calculadoFórmula
132px16 × 21
264px16 × 22
3128px16 × 23
4256px16 × 24
5512px16 × 25
61024px16 × 26
72048px16 × 27
84096px16 × 28
Compartilhar:

Calculadora EM para PX - Visualize efeitos de aninhamento CSS EM

Quer entender como as unidades em se acumulam em elementos HTML aninhados? Você encontrou a ferramenta certa.

Aqui está o ponto:

Diferente do rem (que é sempre relativo à raiz), em é relativo ao tamanho de fonte do elemento pai. Isso cria um efeito de multiplicação em cascata que pode sair do controle rapidamente.

Como usar esta calculadora de aninhamento EM

Usar esta ferramenta é simples:

  1. Selecione seu tamanho de fonte base - Este é o tamanho de fonte do elemento raiz (padrão 16px)
  2. Digite seu valor em - O multiplicador em usado no seu CSS
  3. Escolha os níveis de aninhamento - Quão profundo você quer visualizar
  4. Veja a cascata - Observe como os valores se acumulam em cada nível

Por que EM se acumula - O problema do aninhamento

Você pode estar se perguntando:

Por que font-size: 2em cria resultados tão diferentes dependendo de onde é aplicado?

Isso é incrível:

Com uma base de 16px e font-size: 2em:

  • Nível 1: 16px × 2 = 32px
  • Nível 2: 32px × 2 = 64px
  • Nível 3: 64px × 2 = 128px
  • Nível 4: 128px × 2 = 256px

Com apenas 4 níveis de profundidade, sua fonte é 16 vezes maior que a base!

A fórmula de acumulação EM

A fórmula para em em qualquer nível de aninhamento:

px = tamanho-fonte-base × em^nível

Por exemplo, com base 16px e 1.5em:

  • Nível 1: 16 × 1.5¹ = 24px
  • Nível 2: 16 × 1.5² = 36px
  • Nível 3: 16 × 1.5³ = 54px
  • Nível 4: 16 × 1.5⁴ = 81px

Conversão em lote

Quer converter muitos valores em de uma vez? Use a conversão em lote.

  1. Cole CSS/texto com valores em (por exemplo 1.5em).
  2. Escolha o tamanho de fonte base.
  3. Copie a saída com todos os valores em convertidos para px.

Observação: a conversão em lote trata em como relativo ao tamanho de fonte base selecionado. Para o efeito de aninhamento, use a tabela de níveis acima.

Perguntas frequentes

Por que meu texto continua crescendo em elementos aninhados?

Se você está usando unidades em para font-size, cada nível de aninhamento multiplica o valor. Mude para unidades rem para tamanhos consistentes.

O em pode ser útil apesar da acumulação?

Absolutamente. Em é ótimo para:

  • Padding/margin que escala com o tamanho do texto
  • Espaçamento interno de componentes que deve escalar junto
  • Tamanhos de ícones que combinam com o texto adjacente