CSS Academy · Lektion

Relativa enheter: em och rem

Ändra storlek på element i förhållande till det överordnade elementets eller rotens teckenstorlek med enheterna em och rem.

Lektion 2 av 413 steg

Relativa enheter: em och rem är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad är relativa enheter?

Relativa enheter skalas utifrån ett annat mått – vanligtvis ett elements eller rotelementets teckenstorlek. De möjliggör skalbara och responsiva designer som respekterar användarens inställningar.

em — Relativt till det överordnade elementets teckenstorlek

em är relativt till teckenstorleken för det aktuella elementet (för själva font-size) eller det överordnade elementet (för andra egenskaper). Detta kan orsaka ackumulering.

<div class="parent">
    Parent (20px)
    <div class="child">
      Child (1.5em = 30px)
      <div class="grandchild">Grandchild (1.5em = 45px!)</div>
    </div>
  </div>

em för avstånd

När em används för padding, margin eller border-radius är det relativt till elementets egen teckenstorlek. Det skapar komponenter som skalas proportionellt.

<button class="button">Padded Button</button>

rem — Relativt till rotelementets teckenstorlek

rem (root em) är relativt till rotelementets teckenstorlek (html). Det ackumuleras aldrig och är förutsägbart på hela sidan.

<h1>Heading (2.5rem = 40px)</h1>
  <p>Paragraph text (1rem = 16px)</p>
  <small>Small print (0.75rem = 12px)</small>

rem och tillgänglighet för användare

Om användaren ökar webbläsarens basteckenstorlek (t.ex. från 16px till 20px för bättre läsbarhet) skalas rem-enheter därefter. Fasta px-enheter gör inte det. Därför rekommenderas rem starkt för typografi.

Teckenstorlek för html i procent

Ange rotelementets teckenstorlek i procent för att respektera användarens inställningar i webbläsaren:

<p>Root font-size respects the browser/user default (100%).</p>

Välja mellan em och rem

Praktisk vägledning:

Använd rem för teckenstorlekar, avståndstokens och mått för layout
Använd em för avstånd inom komponenter som ska skalas med komponentens teckenstorlek (t.ex. padding på en knapp)

em i mediefrågor

Mediefrågor som anges i em reagerar på ändringar av webbläsarens teckenstorlek. En brytpunkt på 48em = 768px med standardinställningar, men anpassas om användaren har ändrat sin basteckenstorlek.

<div class="layout">
    <div>Column A</div>
    <div>Column B</div>
  </div>

Beräkna em

Formeln är: desired px / parent px = em value. Om det överordnade elementet är 16px och du vill ha text på 24px: 24/16 = 1.5em.

<h2>Heading (24px via 1.5rem)</h2>
  <p>Paragraph (18px via 1.125rem)</p>

Problemet med ackumulerande em

När element med em-storlek nästlas ackumuleras teckenstorleken multiplikativt. Därför föredras rem för teckenstorlek – den refererar alltid till roten och förhindrar ackumulering.

ch — Teckenbredd

Enheten ch motsvarar bredden på tecknet ”0” i det aktuella teckensnittet. Den är användbar för att begränsa textbehållare till läsbara radlängder:

<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>

Snabb kontroll

En knapp har font-size: 1.25rem och padding: 0.5em. Om rotelementets teckenstorlek är 16px, hur stort är padding i pixlar?

Besvara frågan i den interaktiva lektionen

Sammanfattning

em skalas i förhållande till det aktuella elementets teckenstorlek (eller det överordnade elementets för själva teckenstorleken) – det kan ackumuleras. rem skalas alltid i förhållande till roten och ackumuleras aldrig. Använd rem för typografi och globala avstånd; använd em för proportionella avstånd inom komponenter.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Relativa enheter: em och rem” gratis?

Ja – hela texten till ”Relativa enheter: em och rem” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Relativa enheter: em och rem”?

Ändra storlek på element i förhållande till det överordnade elementets eller rotens teckenstorlek med enheterna em och rem. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Relativa enheter: em och rem”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till CSS Academy