Pixel a em
Convert px to em using a parent element's font size. em is relative to the immediate parent — useful when a button's padding should scale with its label text, or a nested list indent follows local body size. Formula: em = px ÷ parentFontSizePx.
Pixel
Dimensione font genitore (px)
Risultato
1em
How to convert px to em
1. Identify the parent element's font size in px (e.g. 18 px).
2. Enter the px value to convert (e.g. 9 px letter-spacing).
3. Read em result (9 ÷ 18 = 0.5 em).
4. Apply in CSS on the child element scoped to that parent context.
Esempi da Px a Em
Imbottitura con bottoni
Carattere principale 16 px; imbottitura verticale 8 px → 0,5 em. Si ridimensiona se il genitore diventa 18 px su schermi di grandi dimensioni.
Intestazione nidificata
Carattere della sezione 20 px; sottovoce disegno 24 px → 1,2 em relativo alla sezione, non alla radice.
Allineamento delle icone
Icona in linea 14 px con riga di testo di 16 px → la casella dell'icona da 0,875 em si allinea alle metriche del testo.
Quando convertire px in em
• Quando i componenti interni devono essere ridimensionati con le modifiche alla dimensione del carattere locale.
• Quando si definisce uno stile di testo ricco in cui i titoli si trovano all'interno di contenitori di dimensioni diverse.
• Quando legacy CSS li utilizzava e mappi nuovi design px nello stesso sistema.
Quando scegliere altro
• Quando desideri una spaziatura coerente in tutto il sito, rem dalla root è più semplice.
• Quando l'annidamento profondo provoca bug di composizione, preferisci rem per i margini.
• Quando hai bisogno del dimensionamento relativo alla visualizzazione, usa vw/vh.
Evitando trappole complesse
I menu profondamente nidificati con dimensione del carattere: 0,9 em ad ogni livello riducono il testo in modo imprevisto. Preferisci rem per la dimensione del carattere a livello strutturale; usa em per il riempimento locale legato a un genitore. Documentare le ipotesi principali nei token di progettazione.
em per le query multimediali?
Media query em unità a cui si fa riferimento storicamente all'impostazione predefinita del browser (16 px), non al componente principale. Il design reattivo moderno utilizza spesso punti di interruzione rem o px: scopri a quale contesto si rivolge il tuo foglio di stile.
Domande frequenti
Qual è la differenza tra em e rem?
em fa riferimento alla dimensione del carattere principale; rem fa riferimento solo alla dimensione del carattere root (html).
Perché gli em annidati si compongono?
Ogni livello si moltiplica: 1,2 em all'interno di 1,2 em genitore = 1,44 × radice se entrambi si applicano alle catene di dimensioni dei caratteri.
Formula?
em = px ÷ parentFontSizePx. Utilizza sempre la dimensione del carattere calcolata dal genitore diretto.
Imbottirli?
Sì: riempimento/margine in scala em con la dimensione del carattere dell'elemento (per margine/imbottitura, le specifiche utilizzano la dimensione del carattere dell'elemento).
Quando hanno avuto origine?
Tradizionalmente "larghezza della M maiuscola" in caratteri metallici; ora definito rispetto alla dimensione del carattere in CSS.
I dati vengono caricati?
No. La conversione viene eseguita localmente.