Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: EM units

  1. #1
    New Coder
    Join Date
    May 2005
    Location
    Alabama
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    EM units

    Hey everyone, I have been reading CSS Mastery: Advanced Web Standards Solutions, and sometimes I notice that the author uses "em" units. My question is how do these exactly work? Is is relative to the size of a parent element or is there a certain measure for 1em?

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    On the web, 1em is proportionate to the default browser font size. So, if the default size is 16px, then 1em will equal 16px, more or less.

    Ems are preferred mainly because IE can't resize pixel-based text. But you can also create some nice scaling layouts — for example, if you set the width of a column to 30em, a user who bumps up his font-size will also bump up the width of the column. I'm using an em-based layout on my temp company site, http://littlethinky.com. Resize the text and you'll see what I mean.

    Hope this helps…

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by rmedek View Post
    On the web, 1em is proportionate to the default browser font size. So, if the default size is 16px, then 1em will equal 16px, more or less.
    Actually, ems are proportionate to the inherited font size. So, if the current font size is 50 pixels and you set an em value on a child element, the em value will be proportional to 50 pixels instead of the browser default (16 pixels, in your example).

    Quote Originally Posted by rmedek View Post
    Ems are preferred mainly because IE can't resize pixel-based text.
    Maybe this is true in the case of font sizes, but ems can also be used for padding and margins. In those cases, they would be used to create spacing proportionate to the font size (larger text needs more space). So, if all margins and padding are specified in ems and you change your site’s font size, then you’ve changed the margins and padding at the same time; this is much more dynamic and requires less maintenance. The same is true (or should be) when the user uses their browser’s text resize function; the spacing will (or should) automatically accommodate whatever text size they’ve chosen.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by Arbitrator View Post
    Actually, ems are proportionate to the inherited font size.
    D'oh…I should have clarified that, thanks. I meant to point out that the default (i.e., 100% text-size, no inheritance) font-size of 1em is proportionate to the browser default.

    @jshl_wiz: a few good resources for starting to work with ems that helped me a bunch:

    http://clagnut.com/blog/348/
    http://www.thenoodleincident.com/tutorials/typography/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •