Home/ Questions/Q 5962077
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T19:03:17+00:00

Lets say I have the following code: <html> <body> <header> <h1> Hello World </h1>

  • 0

Lets say I have the following code:

<html>
  <body>
    <header>
      <h1>
        Hello World
      </h1>
    </header>
  </body>
</html>

body{
  // make 1em equivalent to 10px when browser default is 16px 
  font-size: 62.5%;
}

header{
  font-size: 1em;
}

header h1{
  font-size: 3em;
  margin-bottom: 1em;
}

If the browser’s default font-size is 16px, then our h1 will be 30px. I was hoping that the margin below my h1 would be 33% of the font-size but for some reason it is also 30px. Just like the font-size. I clearly specify that it should be 1em.

I understand that em’s are relative to the parent container. Are margins relative to the current element? i.e. if font-size of the h1 is set to 4em (40px), then does a 1em margin automatically become 40px too? Is this the expected behaviour? Should I be saying margin-bottom: 0.33em.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are correct in assuming that 1em is equal to the current font size. So if we had this:

    <header style="font-size:10px;">
<h1 style="font-size:2em; padding:1em;">
Hello World
</h1>
<p style="padding:1em;">
The world is a happy place
</p>
</header>

    The padding for h1 would be 20px and the padding for p would be 10px.

    If you are new to ems, I just remembered this article that I highly recommend that talks about creating webpages using ems: Fluid Grids

    • 0