"em" in css not working as expected

If I have have a div that contains 8 letters and I set the width of the div to 8em shouldn't it it scale perfectly to fit the width of the letters? What I'm seeing is not the case... why?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
No man...
em is a relative dimension.

Whatever you use with em is relative to the current font size.

So if you set the font-size to 14px
     1em = 14px
     2em = 28px

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
em is equal to the width of the m in the font that is set for the element being styled and is responsive to user overrides the actual width of an element styled using em will only match the width of the content in the content contains all m characters or you are using  a fixed width font.

Alexandre SimõesManager / Technology SpecialistCommented:
@COBOLdinosaur, I think you're making a mistake here.

'ex' is relative to the height of the letter x (lower case).
'em' is directly relative to the font size.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Yes that is the technical definition, which does not explain why the width is not what was expected.  So let me clarify.

When used for width, the cell to contain a character computes to the widest space required for any character for the font/font variant in effect. The m is the widest character so a width of 8em is going to be the width of an m times 8.  The calculation of width has to take place in the absence of knowledge of the actual text so the calculation will never come out to the length of the string unless it is all m characters or the font is fixed width.

So if the font-size computes to 10, then 8em will be 80px.  Here is a simple unit conversion table.

Alexandre SimõesManager / Technology SpecialistCommented:
@COBOLdinosaur still I think you're not correct.
I think you're mixing height with width.

AFAIK, a 14px font means that the max height that a letter can have is 14px, but there's no restriction or relation with the width. The width of a font always depends on the font designer... the only "restriction" is that the invisible rectangle that surrounds each letter of the font has a fixed 14px height.

Here's a live example: http://jsfiddle.net/K8EGu/2/
All td's have a 20em width set and the end width doesn't match the text width even full of m's.
Note that the div's look a bit shorter because of the table border, we should onlz compare the cell inside area.
Now the last div shows that setting the div to an height equal to the font size it fits a height of the tallest possible char. By default is not a perfect fit, is always a couple of pixels shy.

So, to conclude, we can never rely on 'em' for width.
If you want a perfect width don't set a width at all. Either divs or tables cells will expand.
You can even add a padding to add some distance between the text and the container borders.

You know you might be right.  In the end it does not matter because you can never be sure of the width of an element no matter what you use because not all browsers follow the standard of 96 pixels per inch anyway.  

BTW table cells will adjust to width sometimes, and div do not.  A div with no width defined defaults to 100%. It can expand the height but not the width. What it does when there is more tha it can hold is defined by the overflow properties. A table cell will only adjust to content based on the overall table structure and how much room is available for all the cells.

Brandon LyonSenior Frontend DeveloperCommented:
em are also relative to their parents. If you have a div that is 1.2em and a paragraph inside that div which is set to 1.2em, you'll end up with text that is 1.44 (1.2 x 1.2 = 1.44).

You may want to try rem, which is a unit of measurement that is relative only to the ROOT font size of the entire document (r(oot)em). Unfortunately, IE < 9 does not support rem units so you'll have to fall back to something else for that case.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Internet Protocols

From novice to tech pro — start learning today.