I don't understand em

Tell us what’s happening:
So, how is em calculated?

Also, if I understood correctly when I put padding: 1.5em to the, it means that will be red box, it means that it will be relative to the yellow? So if the yellow box gets bigger, the red box will get bigger too?

Your code so far


<style>
.injected-text {
  margin-bottom: -25px;
  text-align: center;
}

.box {
  border-style: solid;
  border-color: black;
  border-width: 5px;
  text-align: center;
}

.yellow-box {
  background-color: yellow;
  padding: 20px 40px 20px 40px;
}

.red-box {
  background-color: red;
  margin: 20px 40px 20px 40px;
  padding: 20px 40px 20px 40px;
  padding: 1.5em;
}

.green-box {
  background-color: green;
  margin: 20px 40px 20px 40px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36.

Challenge: Understand Absolute versus Relative Units

Link to the challenge:

Hi there,

Only the red box will change. em refers to the font size. A padding of 1em would be the same as the height of the font.

I hope that makes sense.

Hi @Porphyrogennitos!

There is a great FCC article that goes into detail on relative units like em, and rem.

You can also check out this article on em and rem.

1 Like

Thanks.

How do I save the articles? Do I put them on a Google Chrome bookmark or there is another way?

Yeah you can just bookmark them and place them in a folder called programming.

1 Like