Step 54: Use margin setting to add 1 em to top and bottom margin

HTML-CSS
1

I have it set to margin: 1em 0 0 1em;
it is not working.

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

}


   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36

Challenge: Step 54

Link to the challenge:

2

The order of the margins is: top, right, bottom, left. Also, you can do a shortcut and only use two values if the top/bottom and right/left use the same values:

margin: top/bottom right/left

Just to be clear, there are no forward slashes here. This just means that the first value is for both the top and bottom margins and the second value is for both the right and left margins.

3

i have margin: 1em, 0; and its not working and have tried margin: 1em 0; as well as using all four margin: 1e, 0, 1e, 0; and i have not gotten anywhere.

4

There should be no commas in between the values, so you can forget about those. This one:

margin: 1em 0;

looks like it should work but it’s hard to be certain unless we can see all of your code.

5

It ended up working when i did margin: 1em auto;

what is the difference between setting right/left to auto rather than 0?

6

I was just in the middle of writing that you accidentally changed the left/right value, so glad you were able to figure out to change it back to auto.

Setting it to auto will center the element vertically. Did you notice that the Submit button was shifted to the left side when you had it at 0?

7

I did notice that, thank you so much for your help!

8

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