A front-end developer from Mar del Plata, Argentina. Passionate about CSS, accessibility, and JS. Currently working on "just a small fix", as I've been doing for the last 15 years.
You seem to be confused about how CSS declaration blocks works. The order on which you declare CSS properties inside the declarations block have no effect whatsoever on the other properties. The font-size declaration could be the very first in that block or the very last, and the results wouldn't change.
In your em example, both the margins as the paddings are 36px, as they both scale to the element's given font-size.
Here's a quick demo using your code (plus some backgrounds to demonstrate exactly where the margin, padding and content boundaries are): jsfiddle.net/82vcemqd/
Using rem for everything doesn't scale well, and you might simply use px then. It's not a matter of choosing one or the other for every single thing: Rem shines for scaling text, while em is better for things that should be relative to the font-size, such as the paddings.
Jenn is a self taught web developer who specializes in usability and accessibility. She is easily spotted at conferences by her bright lipstick and various code dresses and t-shirts.
You seem to have misunderstood the post since nowhere does it suggest the order of declared CSS properties affects the outcome.
I'm guessing the intent was to highlight the different behaviour when you nest multiple elements with em or rem units applied: jsfiddle.net/blindfish/2xqc1f9d/18/
The general consensus when I last did any serious research on the matter (a while ago) was that for predictable results em should be used with caution. IIRC there was a fun IE bug that didn't help its reputation much.
And to clarify the difference:
rem: sized relative to page root
em: sized relative to parent
If you use nothing but em units on deeply nested content good luck to you!
A front-end developer from Mar del Plata, Argentina. Passionate about CSS, accessibility, and JS. Currently working on "just a small fix", as I've been doing for the last 15 years.
Hey Jenn!
You seem to be confused about how CSS declaration blocks works. The order on which you declare CSS properties inside the declarations block have no effect whatsoever on the other properties. The font-size declaration could be the very first in that block or the very last, and the results wouldn't change.
In your
emexample, both the margins as the paddings are 36px, as they both scale to the element's given font-size.Here's a quick demo using your code (plus some backgrounds to demonstrate exactly where the margin, padding and content boundaries are): jsfiddle.net/82vcemqd/
Using rem for everything doesn't scale well, and you might simply use px then. It's not a matter of choosing one or the other for every single thing: Rem shines for scaling text, while em is better for things that should be relative to the font-size, such as the paddings.
Thank you for comment. I have misremembered and explained it badly.
I have also updated the examples to make it better and reflect current behavior.
Here is a better blog post from 2016 describing it, zellwk.com/blog/rem-vs-em/
Thanks for the article - I didn't know about the rem / em debate. Both your introduction and the zellwk blog post above were really helpful.
Came here to say this.
You seem to have misunderstood the post since nowhere does it suggest the order of declared CSS properties affects the outcome.I'm guessing the intent was to highlight the different behaviour when you nest multiple elements with em or rem units applied: jsfiddle.net/blindfish/2xqc1f9d/18/
The general consensus when I last did any serious research on the matter (a while ago) was that for predictable results em should be used with caution. IIRC there was a fun IE bug that didn't help its reputation much.
And to clarify the difference:
If you use nothing but em units on deeply nested content good luck to you!
read the post again...
Lol. Sorry: correction accepted; but my point about nested ems still stands: they can be a cause of confusion.