Learn HTML Forms by Building a Registration Form - Step 39

Tell us what’s happening:
Describe your issue in detail here.
when I write this code:margin:1em auto; the margin top and bottom of h1 and p is 32 px, I do not understand why because h1 and p are children of body(which has font-size:16px) so 1 em is supposed to be 16px. can you explain that to me? Thank you.

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Registration Form</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Registration Form</h1>
  <p>Please fill out this form with the required information</p>
  <form action='https://register-demo.freecodecamp.org'>
    <fieldset>
      <label>Enter Your First Name: <input type="text" name="first-name" required /></label>
      <label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
      <label>Enter Your Email: <input type="email" name="email" required /></label>
      <label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
    </fieldset>
    <fieldset>
      <label><input type="radio" name="account-type" /> Personal Account</label>
      <label><input type="radio" name="account-type" /> Business Account</label>
      <label>
        <input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
      </label>
    </fieldset>
    <fieldset>
      <label>Upload a profile picture: <input type="file" name="file" /></label>
      <label>Input your age (years): <input type="number" name="age" min="13" max="120" />
      </label>
      <label>How did you hear about us?
        <select name="referrer">
          <option value="">(select one)</option>
          <option value="1">freeCodeCamp News</option>
          <option value="2">freeCodeCamp YouTube Channel</option>
          <option value="3">freeCodeCamp Forum</option>
          <option value="4">Other</option>
        </select>
      </label>
      <label>Provide a bio:
        <textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
      </label>
    </fieldset>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}

h1, p{
margin:1em auto;
text-align:center;
}

label {
display: block;
margin: 0.5rem 0;
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Learn HTML Forms by Building a Registration Form - Step 39

Link to the challenge:

Browsers automatically give the heading elements default font sizes based on em units. That’s why the h1 is displaying bigger than the rest of the text in the preview window even though you didn’t manually set the font size for it. Your browser is giving the h1 element a font size of 2em, so the font size for the h1 is twice the default font size you set in body, which is 16px in this case. And thus the margin is 32px since you set it to 1em.

Normally you would probably not rely on the browser defaults and you would reset all these default values to whatever you wanted them to be.