Pixels em em
Converta px em em usando o tamanho da fonte de um elemento pai.
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.
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.
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.