Pixels voor em
Converteer px naar em met behulp van de lettergrootte van een bovenliggend element. em is relatief ten opzichte van de directe ouder - handig wanneer de opvulling van een knop moet schalen met de labeltekst, of een geneste lijstinspringing de lokale lichaamsgrootte volgt. Formule: em = px ÷ parentFontSizePx.
Pixels
Lettergrootte van bovenliggend element (px)
Resultaat
1em
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.
Wanneer kies je iets anders
• Als je consistente spatiëring voor de hele site wilt, is rem from root eenvoudiger.
• Wanneer diep nesten ervoor zorgt dat er bugs ontstaan, geef dan de voorkeur aan rem voor marges.
• Als je een viewport-relatieve grootte nodig heeft, gebruik dan vw/vh.
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.
em voor mediavragen?
Em-eenheden voor mediaquery's waarnaar historisch wordt verwezen in de browserstandaard (16 px), niet de bovenliggende component. Modern responsief ontwerp maakt vaak gebruik van rem- of px-breekpunten — weet op welke context je stylesheet zich richt.
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.
Worden gegevens geüpload?
Nee. De conversie werkt lokaal.