jfrosty jfrosty - 4 months ago 25
CSS Question

Are rems replacing ems in CSS?

I was reading about

units in CSS3, and was a little confused. If you use
rem
, do you still use
em
or does that replace it?

For example:

.selector {
margin-bottom:24px;
margin-bottom:2.4rem;
font-size:16px;
font-size:1.6rem;
}


or

.selector {
margin-bottom:24px;
margin-bottom:2.4em;
margin-bottom:2.4rem;
}


Just trying to figure out if
rem
takes the place of
em
, or if it's just another unit.

Answer

Rem is the em size for the root (html) element. That means once you define the html element's font-size, you can define all rem units relative to that.

For example:

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

Rem is supported in Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer, but for older browsers you still have to use em, percent or px.

Comments