--- title: "Hur fungerar måttet \"em\" egentligen?" type: "forum-thread" url: "https://www.webforum.nu/amne/html-css/170725-hur-fungerar-måttet-em-egentligen" topic: "HTML & CSS" topic_url: "https://www.webforum.nu/amne/html-css" author: "olarsson" published: "2008-04-11T14:51:47.000Z" updated: "2008-04-17T18:16:08.000Z" replies: 29 views: 2499 page: 1 pages: 2 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/170725-hur-fungerar-måttet-em-egentligen" --- # Hur fungerar måttet "em" egentligen? _Sida 1 av 2._ ## #1 — olarsson, 2008-04-11T14:51Z Hur är det med em i CSS egentligen? Tas detta måttet utifrån normalstorleken på texten hela sidan eller utifrån textstorleken på det aktuella blocket. Anta att man har en sektion som har bredden i em och man får för sig att ändra textstorleken i detta block kommer då sektionen bli bredare? Vad händer om man har många olika textstorlekar i en viss sektion? Permalänk: https://www.webforum.nu/p/170725 ## #2 — silfver, 2008-04-11T14:54Z > **http://www.w3schools.com/css/css_units.asp skrev:** > > 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses Permalänk: https://www.webforum.nu/p/2100328 ## #3 — olarsson, 2008-04-11T15:23Z Tack för svaret. Så mycket förstår jag också. Men vad är "current font size" är det något sorts ursprungsmått för hela dokumentet eller är det ett mått för varje ellement? Det vore mer praktisk om det vore ett normalmått för hela dokumentet för då skulle man kunna ändra textstorleken i olika sektioner utan att de blev oproportioenellt stora i förhållande till varandra. Permalänk: https://www.webforum.nu/p/2100346 ## #4 — silfver, 2008-04-11T15:30Z > **olarsson skrev:** > > Tack för svaret. Så mycket förstår jag också. Men vad är "current font size" är det något sorts ursprungsmått för hela dokumentet eller är det ett mått för varje ellement? Har du inget mått satt i din body, så är det väl standardstorleken i webbläsaren som avgör. Du kan ju sätta olika storlekar på olika element. Har du t.ex. satt storleken i body till 2em, så kan du bestämma att p ska ha .7em, och den storleken kommer ju då bli .7 \* 2em = 1.4em. Förstår jag dig rätt? :) (Förstår jag själv? :p) Permalänk: https://www.webforum.nu/p/2100348 ## #5 — olarsson, 2008-04-11T15:30Z Ok tack så mycket för svaret. Man kunde tänka sig att det fanns ett standardmått för hela dokumentet och att man sedan kunde göra text i varje del större eller mindre om man ville. Permalänk: https://www.webforum.nu/p/2100350 ## #6 — jarvklo, 2008-04-11T18:34Z Hmm... Det gör det. Det är den storlek du ställer in på body (och om den saknas, webbläsarens grundinställning - som sagt :) ) "em" är ett av de mått du kan ta till för att ändra textstorlek relativt grundinställningen, "%" är ett annat. Tricket är att placera ut dem fiffigt mha id och/eller class på lämpliga containers. Eftersom de "ärver" från sina "föräldrar" (dvs de "containers" de ligger inpetade i (och eftersom relativa mått räknas ihop som silfver nämner). Här är ett modifierat gammalt tvåspaltsexempel med nya typsnittsinställningar som illustrerar ett sätt du kan jobba på om du vill (kolla speciellt hur storleken på h1 skiljer sig mellan spalterna och hur det är deklarerat: ``` Ett av Jarvklos exempel
Meny

mainleft

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut ante a sapien venenatis euismod. Ut vitae leo non tellus congue pulvinar. Vestibulum sed risus. Aenean eget lectus ac dui tincidunt imperdiet. Curabitur vestibulum augue in odio. Quisque eget tortor.

mainright

Etiam hendrerit velit nec nisl. Quisque et sapien eu odio aliquet vehicula. Suspendisse volutpat, magna et iaculis accumsan, ante purus rutrum mauris, non sodales dolor mauris et urna. Nam at ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur vitae justo. Nam tellus ipsum, adipiscing quis, imperdiet vel, gravida id, sem. Maecenas et magna nec erat tincidunt placerat. Sed viverra, erat vitae euismod tristique, eros arcu molestie sem, id sagittis justo urna at erat.
``` Testa: Om du mekar genom att ställa in ny font-size: för body tror jag du får en känsla för hur det hänger ihop. Lycka till :bire Permalänk: https://www.webforum.nu/p/2100394 ## #7 — silfver, 2008-04-11T20:07Z jarvklo: Betyder detta att jag inte var ute och cyklade? :birp Permalänk: https://www.webforum.nu/p/2100401 ## #8 — olarsson, 2008-04-11T20:08Z ... Jaha det var ju trevligt. Tack för svaret. Permalänk: https://www.webforum.nu/p/2100402 ## #9 — jarvklo, 2008-04-11T21:27Z OT: (och ursäkta tramset) > **silfver skrev:** > > jarvklo: Betyder detta att jag inte var ute och cyklade? :birp Hur skall jag kunna veta var du var och vad du gjorde förutom knackade på ett tangentbord när du skrev ditt inlägg? :moose Permalänk: https://www.webforum.nu/p/2100417 ## #10 — silfver, 2008-04-11T23:33Z Bah. :e Permalänk: https://www.webforum.nu/p/2100431 ## #11 — joser, 2008-04-12T12:22Z > **olarsson skrev:** > > ... Men vad är "current font size" ... Det är den aktuella selektorns font-size, gäller för allt utom för font-size där 1em är förälderns font-size. D.v.s i en paragraf med font-size 16px, får en span med fontsize 0.8em och line-height 1em en fontstorlek på 13px och en radhöjd på 13px. Nästade em kan vara svåra att hålla reda på storleken på. Permalänk: https://www.webforum.nu/p/2100480 ## #12 — Fuel, 2008-04-14T22:27Z alltså .. "översätta" mått i px till em för block? funkar inte med 960px/13 = 73.84 ser inte ut som 960px för mig iaf ``` CSS px / em

Examples

960px

73.84em

59.90em

In firefox, use ctrl + scrollwheel

``` Permalänk: https://www.webforum.nu/p/2100982 ## #13 — joser, 2008-04-15T11:12Z > **Fuel skrev:** > > alltså .. "översätta" mått i px till em för block? funkar inte med 960px/13 = 73.84 ser inte ut som 960px för mig iaf Bara om du ändrar fontstorleken till 13px, och bara i IE. ;) Permalänk: https://www.webforum.nu/p/2101064 ## #14 — Fuel, 2008-04-15T11:49Z > **joser skrev:** > > Bara om du ändrar fontstorleken till 13px, och bara i IE. ;) que? Permalänk: https://www.webforum.nu/p/2101078 ## #15 — joser, 2008-04-15T12:02Z 1em är ju lika med "current font-size". Ditt exempel hade 100% av webbläsarens användarfont, och det är bara i IE som font satt i pixel inte kan ändras av användaren. Permalänk: https://www.webforum.nu/p/2101087 ## #16 — Fuel, 2008-04-15T12:20Z ehh.. hänger inte med :q jag försöker omvandla ett blocks (div) size från px till em Permalänk: https://www.webforum.nu/p/2101095 ## #17 — joser, 2008-04-15T13:51Z Testa: ``` #div1 { background-color:#FF8000; width:960px; } #div2 { font-size:13px; background-color:#FF80C0; width:73.84em; } #div3 { font-size:16px; background-color:#FFcc33; width:59.90em; } ``` Permalänk: https://www.webforum.nu/p/2101110 ## #18 — Fuel, 2008-04-15T14:10Z width:en är densamma Permalänk: https://www.webforum.nu/p/2101113 ## #19 — Fuel, 2008-04-15T14:27Z Om.. jag sätter font-size: 90.14%; i body (testade mig fram) så blir width i px/13= width i em **edit** i FF iaf :bla x( va f.... Permalänk: https://www.webforum.nu/p/2101115 ## #20 — SimonG, 2008-04-16T10:24Z > **Fuel skrev:** > > Om.. jag sätter font-size: 90.14%; i body (testade mig fram) så blir width i px/13= width i em > > **edit** i FF iaf :bla x( va f.... Om jag förstår dig rätt vill du ha ett enkelt sätt att omvandla pixlar till em? Sätt body-taggen till "font-size:62.5%;" så motsvarar 1em 10px. Permalänk: https://www.webforum.nu/p/2101285 --- Tråden på webben: https://www.webforum.nu/amne/html-css/170725-hur-fungerar-måttet-em-egentligen Nästa sida: https://www.webforum.nu/amne/html-css/170725-hur-fungerar-måttet-em-egentligen/page2.md