använda en em värde skapar en dynamisk eller beräknad teckenstorlek (historiskt em enhet härleddes från bredden på ett kapital ”M” i en viss typsnitt.). Det numeriska värdet fungerar som en multiplikator för egenskapen font-size för det element som det används på., Tänk på det här exemplet:
p { font-size: 2em;}i det här fallet kommer teckenstorleken på<p> – elementen att fördubblas det beräknadefont-size som ärvs av<p> – elementen. I tillägg motsvarar en font-size för 1em den beräknade font-size för det element som det används på.,
om en font-size inte har ställts in på någon av <p>förfäder, då 1em kommer att motsvara standardwebbläsaren font-size, som vanligtvis är 16px. Så, som standard 1em motsvarar 16px, och 2em motsvarar 32px., Om du skulle ställa in ett font-size på 20px på elementet <body>, skulle 1em på elementen <p> istället motsvara 20px och 2em skulle motsvara 40px.,
för att beräknaem motsvarande för alla pixelvärden som krävs kan du använda denna formel:
em = desired element pixel value / parent element font-size in pixels
em är en mycket användbar enhet i CSS eftersom den automatiskt anpassar sin längd i förhållande till det teckensnitt som läsaren väljer att använda.
ett viktigt faktum att komma ihåg: em värden förening., Ta följande HTML och CSS:
html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */}span { font-size: 1.6em;}<div><span>Outer <span>inner</span> outer</span></div>resultatet är:
förutsatt att webbläsarens standard font-size är 16px, skulle orden ”yttre” återges vid 16px, men ordet ”inre” skulle återges vid 25.6 px. Detta beror på att den inre<span>’sfont-size är 1,6 em som är i förhållande till dess föräldersfont-size, vilket i sin tur är i förhållande till dess föräldersfont-size. Detta kallas ofta kompoundering.