Pixels voor em
Converteer px naar em met behulp van de lettergrootte van een bovenliggend element.
Zo zet je px om naar em
1. Identificeer de lettergrootte van het bovenliggende element in px (bijvoorbeeld 18 px).
2. Voer de px-waarde in die je wilt converteren (bijvoorbeeld 9 px letterafstand).
3. Lees em-resultaat (9 ÷ 18 = 0,5 em).
4. Pas toe in CSS op het onderliggende element binnen de context van die bovenliggende context.
Px naar em-voorbeelden
Knopvulling
Bovenliggend lettertype 16 px; verticale opvulling 8 px → 0,5 em. Schaalt als ouder 18 px wordt op grote schermen.
Geneste kop
Sectielettertype 20 px; subkop 24 px ontwerp → 1.2 em relatief ten opzichte van sectie, niet root.
Uitlijning van pictogrammen
Inline pictogram 14 px met 16 px tekstregel → 0,875 em pictogramvak wordt uitgelijnd met tekststatistieken.
Wanneer gebruik je deze tool
• Wanneer component-internals moeten worden geschaald met lokale wijzigingen in de lettergrootte.
• Wanneer je rijke tekst opmaakt waarbij koppen zich in containers van verschillende grootte bevinden.
• Toen de oude CSS em gebruikte en je nieuwe px-ontwerpen in hetzelfde systeem toewijst.
Het vermijden van samengestelde valkuilen
Diep geneste menu's met lettergrootte: 0,9 em op elk niveaje zorgen ervoor dat de tekst onverwacht kleiner wordt. Geef de voorkeur aan rem voor lettergrootte op structureel niveau; gebruik ze voor lokale opvulling die aan één ouder is gekoppeld. Documenteer aannames van ouders in ontwerptokens.
Veelgestelde vragen
Wat is het verschil tussen em en rem?
em verwijst naar de grootte van het bovenliggende lettertype; rem verwijst alleen naar de lettergrootte root (html).
Waarom wordt geneste em samengesteld?
Elk niveaje wordt vermenigvuldigd: 1,2 em binnen 1,2 em ouder = 1,44 × root als beide van toepassing zijn op lettergrootteketens.
Formule?
em = px ÷ parentFontSizePx. Gebruik altijd de berekende lettergrootte van de directe ouder.
Opvullen?
Ja — opvulling/marge in em-schaal met de eigen lettergrootte van het element (voor marge/opvulling gebruikt de specificatie de lettergrootte van het element).
Wanneer is ze ontstaan?
Traditioneel "breedte van hoofdletter M" in metaaltype; nje gedefinieerd ten opzichte van de lettergrootte in CSS.