Pixels em em
Converta px em em usando o tamanho da fonte de um elemento pai. em é relativo ao pai imediato - útil quando o preenchimento de um botão deve ser dimensionado com o texto do rótulo ou um recuo de lista aninhada segue o tamanho do corpo local. Fórmula: em = px ÷ parentFontSizePx.
Pixels
Tamanho da fonte pai (px)
Resultado
1em
Como converter px em em
1. Identifique o tamanho da fonte do elemento pai em px (por exemplo, 18 px).
2. Digite o valor de px para converter (por exemplo, espaçamento entre letras de 9 px).
3. Leia em resultado (9 ÷ 18 = 0,5 em).
4. Aplicar em CSS no elemento filho com escopo para aquele contexto pai.
Exemplos de Px para em
Preenchimento de botão
Fonte pai 16 px; preenchimento vertical 8 px → 0,5 em. Dimensiona se o pai se tornar 18 px em telas grandes.
Título aninhado
Fonte da seção 20 px; subtítulo design de 24 px → 1,2 em relativo à seção, não raiz.
Alinhamento do ícone
Ícone embutido 14 px com linha de texto de 16 px → caixa de ícone de 0,875 em alinha às métricas de texto.
Quando converter px em em
• Quando os componentes internos devem ser dimensionados com a fonte local mudanças de tamanho.
• Quando você estiliza rich text onde os títulos ficam dentro de contêineres de tamanhos diferentes.
• Quando o CSS legado os usa e você mapeia novos designs de px no mesmo sistema.
Quando escolher outra coisa
• Quando você quer espaçamento consistente em todo o site - rem da raiz é mais simples.
• Quando o aninhamento profundo causa erros de composição - prefira rem para margens.
• Quando você precisar de dimensionamento relativo à janela de visualização - use vw/vh.
Evitando armadilhas compostas
Menus profundamente aninhados com tamanho de fonte: 0,9em em cada nível reduzem o texto inesperadamente. Prefira rem para tamanho de fonte em níveis estruturais; use-os para preenchimento local vinculado a um dos pais. Documente as suposições dos pais em tokens de design.
em para consultas de mídia?
Consulta de mídia em unidades historicamente referenciadas pelo padrão do navegador (16 px), não pelo componente pai. O design responsivo moderno geralmente usa pontos de interrupção rem ou px – saiba qual contexto sua folha de estilo visa.
Perguntas frequentes
Qual é a diferença entre em e rem?
em faz referência ao tamanho da fonte pai; rem faz referência apenas ao tamanho da fonte raiz (html).
Por que o em aninhado é composto?
Cada nível se multiplica: 1,2 em dentro de 1,2 em pai = 1,44 × raiz se ambos se aplicam a cadeias de tamanho de fonte.
Fórmula?
em = px ÷ parentFontSizePx. Sempre use o tamanho da fonte computada do pai direto.
Preenchimento em em?
Sim - preenchimento/margem na escala em com o tamanho da fonte do próprio elemento (para margem/preenchimento, a especificação usa o tamanho da fonte do elemento).
Quando em se originou?
Tradicionalmente "largura do M maiúsculo" no tipo de metal; agora definido em relação ao tamanho da fonte em CSS.
Os dados foram carregados?
Não. A conversão é executada localmente.