Changing existing margin

Tell us what’s happening:
I am stuck at step 54 with the a requirement to use current margin to include 1em on top and bottom. Current margin is 0 auto, and I understand that using it to include some change means it remains the same with 1em added on top and bottom. I raised this issue before and got some information that was not supportive enough. Can someone help me understand this issue? What soes it mean to include something to the existing margin?
Thanks,

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <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" class="inline" /> Personal Account</label>
       <label><input type="radio" name="account-type" class="inline" /> Business Account</label>
       <label>
         <input type="checkbox" name="terms" class="inline" 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;
}

form {
 width: 60vw;
	max-width: 500px;
	min-width: 300px;
	margin: 0 auto;
}

fieldset {
 border: none;
	padding: 2rem 0;
}

fieldset:not(:last-of-type) {
 border-bottom: 3px solid #3b3b4f;
}

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

input,
textarea,
select {
 margin: 10px 0 0 0;
	width: 100%;
 min-height: 2em;
}

input, textarea {
 background-color: #0a0a23;
 border: 1px solid #0a0a23;
 color: #ffffff;
}

.inline {
 width: unset;
 margin: 0 0.5em 0 0;
 vertical-align: middle;
}

input[type="submit"] {
 display: block;
 width: 60%;
 min-width: 300px;
 margin: 1em 0 auto;
 height: 2em;
 font-size: 1.1rem
 background-color: #3b3b4f;
 border-color: white;
}

   **Your browser information:**

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

Challenge: Step 54

Link to the challenge:

The margin elements there have this meaning:

  • margin: top right bottom left

If you have less than 4 elements, you go from the left to right to understand that has been filled.
In the challenge, you have only margin: 0 auto;, which means 0 for top margin and auto to the right margin.

I believe this will help you to answer the challenge.

Change the margin property to include 1em on the top and bottom.

Look at these margin properties it may help you:

/* vertical (top, bottom) | horizontal (left, right) */
margin: 0 auto;

/* top | horizontal (left, right) | bottom */
margin: 0 auto 0;

/* top | right | bottom | left */
margin: 0 auto 0 auto;
  • When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
  • When three values are specified, the first margin applies to the top, the second to the right and left, the third to the bottom.
  • When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).

Basically you need to define the margins all individually by providing four attributes to the margin element.

Sorry, this was the first thing I did and now I repeated it according to your advice but the code did not pass.

Sorry again, my last question is pointless.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.