FAQ: Sizing Elements - Rem

This community-built FAQ covers the “Rem” exercise from the lesson “Sizing Elements”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn Responsive Design

FAQs on the exercise Rem

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

under what circumstances would you use em/rem as opposed to just setting the font size in px?

From what I learnt from the lesson exercise on em and rem, rem is the root comparison of the entire elements in the page while em is the comparison of section by section of the page elements. Therefore, it depends on which style you want to apply. For me, the rem is easier because it is global but stylistically, em is more tasking but will give you more and better look of your design.
I hope I got it right.

My own observation here is that I could not answer pass question 2 in the exercise 3/10 for the reason I don’t quite understand. I refreshed many times as usual to get it right yet it didn’t let me move forward even though my answers were correct.
Also once you ask for a review for just one question, it gives the rest of the answers that you didn’t ask for. That’s not good for learners like me.
I wish these be looked into as I feel its a systems bug.
Thanks.

@redcat817 and @course0509112323, px is used when giving an element fixed dimensions. This is not very common as you would probably want your web page to adapt to user preferences. Not only can you use em and rem on elements’ font-size property, but you can actually use them on any other property such as: height, width, etc. I actually use them on the height, width, and nearly all other properties to do with the box model of an element. This means that if the user changes the default font size to small, not only will the text on your web page get smaller, but the whole web page will get smaller

As a general rule of thumb, always use rem unless you really feel forced to use em. This is simply because rem values are easier to calculate. You could also use em when wanting to gradually make elements smaller like the following:

<ul>
  <li>Cheese
    <ul>
      <li>Feta</li>
      <li>Blue Cheese</li>
    </ul>
  </li>
  <li>Meat
    <ul>
      <li>Beef</li>
      <li>Lamb</li>
    </ul>
  </li>
</ul>
html {
  font-size: 30px;
}

li {
  font-size: 0.7em;
}

Output:
image

In the example above, we are setting the <html> element’s font-size property to 30px. Next, we are setting the font-size property of all <li> elements to 0.7em. For the first two <li> elements, 0.7em is equal to 21px. However, for the nested <li>s, 0.7em is equal to 21px * 0.7 which is equal to 14.7px