"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?
Alexandre SimõesConnect With a Mentor Manager / 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
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.
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.