advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

chrisaiv on 06/11/08


Tagged

css


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

basicmagic
SpinZ
rd3k
jfherring


How to use EM's when you're already comfortable with pixels

Published in: CSS 

Here's why I use em: 1. Pixels are precise but they're not very flexible. If you increase your browser's font-size, things may grow in wacky ways. 2. Percentages solve the issue of flexibility but sometimes the math gets tricky and I don't feel very comfortable purely working in that mode. I believe in Rapid Development which in this context means fewer calculators.

By translating 1em to equal 10px, I am able to think in terms of Photoshop pixels but also ensure that increasing the font-size will allow the site to grow proportionally. If you know how to multiply and divide by 10, you'll rarely need a calculator.

Note: The only time I do use px is for 1px borders. 0.1em doesn't work very well.

Plain TextExpand 
  1. * { margin: 0; padding: 0; font-size: 1em; }
  2. html { font-size: 125%; }
  3. body{ font-size: 50%; text-align: center; }
  4.  
  5. p { font-size: 1.2em } /* == 12px */
  6. #content { width: 80em; margin: 0 auto; } /* == 800px */

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: koncept on June 15, 2008

I'm not following the use of 125% for HTML. Since a browser's default font size is 16px, what if you were to do the following instead:

html { font-size:100%; /IE/} body {font-size:62.5% /* Reduce to 10px base /} p { font-size: 1.2em / 12px */ } ...

Posted By: chrisaiv on June 20, 2008

body { font-size:62.5% } works too! Personal preference.

You need to login to post a comment.