PX2REM .COM
Pollo AI

All in one AI tool.
em a px

Vedi come le unità em si accumulano negli elementi annidati. Inserisci un valore em e la dimensione del carattere base per visualizzare l'effetto a cascata ad ogni livello di annidamento.

Come usare 📢 Master the core languages: JavaScript, HTML, CSS, and Python
Dimensione carattere base:
Livelli di annidamento:
Inserisci un valore em per vedere come si accumula ad ogni livello di annidamento

Sequenza di annidamento EM (16px × 2em)

Livello di annidamentoValore calcolatoFormula
132px16 × 21
264px16 × 22
3128px16 × 23
4256px16 × 24
5512px16 × 25
61024px16 × 26
72048px16 × 27
84096px16 × 28
Condividi:

Calcolatore EM a PX - Visualizza gli effetti di annidamento CSS EM

Vuoi capire come le unità em si accumulano negli elementi HTML annidati? Hai trovato lo strumento giusto.

Ecco il punto:

A differenza di rem (che è sempre relativo alla radice), em è relativo alla dimensione del carattere dell’elemento padre. Questo crea un effetto di moltiplicazione a cascata che può sfuggire rapidamente al controllo.

Come usare questo calcolatore di annidamento EM

Usare questo strumento è semplice:

  1. Seleziona la dimensione del carattere base - Questa è la dimensione del carattere dell’elemento radice (predefinito 16px)
  2. Inserisci il tuo valore em - Il moltiplicatore em usato nel tuo CSS
  3. Scegli i livelli di annidamento - Quanto in profondità vuoi visualizzare
  4. Osserva la cascata - Guarda come i valori si accumulano ad ogni livello

Perché EM si accumula - Il problema dell’annidamento

Ti starai chiedendo:

Perché font-size: 2em crea risultati così diversi a seconda di dove viene applicato?

Questo è incredibile:

Con una base di 16px e font-size: 2em:

  • Livello 1: 16px × 2 = 32px
  • Livello 2: 32px × 2 = 64px
  • Livello 3: 64px × 2 = 128px
  • Livello 4: 128px × 2 = 256px

Con solo 4 livelli di profondità, il tuo carattere è 16 volte più grande della base!

La formula di accumulo EM

La formula per em ad ogni livello di annidamento:

px = dimensione-carattere-base × em^livello

Per esempio, con base 16px e 1.5em:

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

Conversione in batch

Devi convertire molti valori em in una volta sola? Usa la conversione in batch.

  1. Incolla CSS/testo con valori em (ad esempio 1.5em).
  2. Scegli la dimensione del font base.
  3. Copia l’output con tutti i valori em convertiti in px.

Nota: la conversione in batch considera em relativo alla dimensione base selezionata. Per il compounding annidato, usa la tabella dei livelli sopra.

Domande frequenti

Perché il mio testo continua a ingrandirsi negli elementi annidati?

Se stai usando unità em per font-size, ogni livello di annidamento moltiplica il valore. Passa alle unità rem per dimensioni consistenti.

L’em può essere utile nonostante l’accumulo?

Assolutamente. Em è ottimo per:

  • Padding/margin che scala con la dimensione del testo
  • Spaziatura interna dei componenti che dovrebbe scalare insieme
  • Dimensioni delle icone che corrispondono al testo adiacente