# FAQ: Sizing Elements - Em

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

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

## FAQs on the exercise Em

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 () 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.

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

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!

so in what cases, we have to use px and when em? thanks

1 Like

The example used in this task has left me quite confused. It states that the font-size of 1.5em is equal to 27 pixels, but surely it should be 24 pixels (16 * 1.5)?

Is there any details I am missing?

Thanks

KJ

16 pixels is the default font size, but here font size is defined as 18 pixels. So the font size of h1 elements will be 18*1.5=27

2 Likes

Whoops, I missed the default 18px font size size.

Thank you!

2 Likes

Hi question about em and rem units. If we are hard-coding the base font size and root element font size in px, wouldn’t the value of the em and rem units always be the same regardless of browser size because the values the relative too are hard coded? Wouldn’t this defeat the purpose of responsive design?

3 Likes

Hello! I’m working on the Bana’s Travel Blog exercise and for question #1, it asks us to set the font size to 1.5 em in #banner h1. Here is my code:

#banner h1 {

font-family: ‘Roboto’, sans-serif;
font-weight: 300;
font-size: 1.5em;
color: white;

}

The font size increases, but I still receive an error message: Did you sent the font size to 1.5em?

It seems to me that this is what I’ve done. I include a screenshot.

MP

I failed to get past the first question without getting the solution. Which looked the same as my answer-- which was rejected. Is this a bug?

Hiya, I also get the same message. I will try to report it as a bug. The solution looks much the same as mine. And the same problem occurs in the next exercise…

Same problem here I also reported that as a bug waiting for a fix or an answer.

This still has not been fixed.

1 Like

For some reason, this page only accepts conversions into px as correct

eg. .post h2 {
font-size: 28px;

Later on, you will come across `rem`. However, between `px` and `em`, you would only use `px` when wanting to set a fixed size to an element no matter the size of anything else. `em` on the other hand, would be used when wanting to size an element relative to the `font-size` property of its nearest set parent element. If it’s parent element doesn’t have an explicit `font-size`, it will be sized relative to its grand-parent element’s `font-size`. This cycle goes on unitl it gets sized relative to the `html` element’s `font-size` property which by default is (most of the times) `16px`

There is one important concept to be aware of. `em` is relative to the element’s nearest parent element with a set `font-size`. Here’s an example to illustrate this concept:

``````<div>
<h1>I have a font size of 20px</h1>
</div>
``````
``````div {
font-size: 10px;
}

div h1 {
font-size: 2rem; /* 20px */
}
``````

In the example above, the `<h1>` element will have a font size of `20px` as its parent element has a font size of `10px`. In this case, `2rem` is equal to `10px` * 2 which is `20px`. However, look at this example:

``````<div>
<h1>I have a font size of 32px</h1>
</div>
``````
``````div h1 {
font-size: 2rem; /* 32px */
}
``````

In the example above, the `<h1>` element will have a font size of `32px`. This is because we didn’t actually explicitly give the `<h1>`'s parent element a font size. This means that it will check if it’s grandparent element has a set font size. The `<body>` element doesn’t have an explicitly set font size either! Finally, it check if the `<html>` element has a set font size. Even if we didn’t set the `<html>` element’s font size, the browser gives it a default font size (in most cases, `16px`). This means that `2em` in this case is equal to `32px` (`16px` * 2 = `32px`)

3 Likes

It depends. If an element’s `font-size` property is relative to the `<html>` element’s `font-size` property, then it will adapt to the user’s browser preferences. This is because the browser actually sets the `<html>` element’s `font-size`, and when the user modifies the user preferences, the browser changes which value it sets to the `<html>` element.

It depends if we make the element with a hard-coded `font-size` property responsive or not. We could use media queries (which you will learn in future lessons) to make the element smaller depending on the screen size the web page is viewed on. We can also use media queries to adjust the `font-size` property of an element depending on the screen size the web page is viewed on. When this happens, the `em` and `rem` units will adapt to the screen size as well

What is the point of using em instead of px?
It seems to me that we are swapping in one hard-coded value for another.
Is it because for devices with smaller/larger displays, the em value would be different?

Peev. If an explanation contains more than 2 prepositional phrases or an ‘of,… of … of’ overdose, that explanation is a chained confusion equation. Review the content below the css code. When I encounter this sentence structure, I deconstruct and reconstruct the sentence. Upside, its like reading the content four times. Downside, there is no guarantee the intended message has been communicated and it makes a short day long. Get an editor.

``````.splash-section {
font-size: 18px;
}

.splash-section h1 {
font-size: 1.5em;
}
``````

The example above shows how to use ems without relying on the default font size of the browser. Instead, a base font size ( `18px` ) is defined for all text within the `splash-section` element. The second CSS rule will set the font size of all `h1` elements inside of `splash-section` relative to the base font of `splash-section` (18 pixels). Seriously, this couldn’t be written better?

If I use em for padding or another position option, will it be relative to the font size of the parent or relative to something else?

At the very beginning the environment says “No response received from web browser” despite of the actual solution. The bug is at least two years old by now and no one cares to fix it. In addition, for some unknown reason it is not possible to skip this stage, although I bet it would be possible in case I have a paid subscription.

In that case, using `em` isn’t so much about being responsive, it’s just a way to keep your fonts proportionate to eachother. Am I right?