FAQ: Sizing Elements - Review: Relative Measurements

This community-built FAQ covers the “Review: Relative Measurements” 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 Review: Relative Measurements

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!

The lesson about relative measurements in CSS says that if I set the width/height of an element as a percentage, I need to set the width/height of its parent element first. However, in the sample website’s code in the same lesson I could not find a single absolute height/width declaration in the CSS of any parent element whose child elements we had to manipulate using percentage values.

Does anyone know why the code still works on the page?

Many thanks
Adam

It could be that the parent element was taking the height/width of the browser window itself. Or that the parent element height/width was dictated by the cumulative height/width of the child elements. I’d play around with the code outside of Codecademy (using Visual Studio Code for instance) and see what you can learn through experimentation.

1 Like

How do we know when to use relative measurements vs hard coded measurements? Does this mean we should stay away from pixels?

Use absolute units (E.g. px) when you want to add fixed dimensions to an element. However, this is not a very common thing to do, so most of the times, you would use relative unit

This review lession states:

When percentages are used to size width and height, child elements will be sized relative to the dimensions of their parent (remember that parent dimensions must first be set).

Why must we set the dimentions of parent elements before using percentages to size child elements? Even if we don’t set the size of parent elements, it would still work, right? Maybe, what this lesson was meant to say is: “to achieve more predictible results, set parent dimentions first”

  • The unit of em sizes font relative to the font size of a parent element.

That is wrong…
This is correct: as per the W3 spec, em are relative to the font size “of the element on which they are used”.

Parent element font sizes can effect em values, but when that happens it’s solely because of inheritance. Let’s take a look at why, and see how this works in action.

Comprehensive Guide: When to Use Em vs. Rem (tutsplus.com)

2 Likes