CSS Step 20 question

I´m having trouble conceptualizing something in the Rothko Painting/CSS course.

In step 20, I give a class item a vertical margin of 20 px. Yet, I see it move to the right.

How does a vertical margin cause it to move horizontally?

One way to investigate questions of this type is to use the browser developer tools.
(Right click on the element that is acting weird and choose the Inspect option)

In the developer tools view you will see which css styles are being applied by the browser and you can change the styles directly in the tool to see what happens (or what the browser will do in response to these changes)

Give it a try.

Okay. I can see it. Yet…conceptually, it still feels a little wonky for me because I think of the first value as being a strictly vertical margin. Yet, 20px is applied to the margin in general. Auto changes the horizontal which explains the additinal movement I see when I do that.

Still, when I think of the pattern for shorthand (top-bottom, left-right). It seems like those 20px would only be applied to top and bottom margins.

what code are you adding please? and what’s the link to the challenge?

Step 20

I´m adding margin: 20px auto; to

  width: 425px;
  height: 150px;
  background-color: #efb762;

You are giving to the right and lelft a value of auto, which is not 0, so you are getting some margin also left and right, that’s why it moves horizontally too

An auto margin is a computed value. It will use whatever it has to, to give each side the same amount. If you open the dev tools and change the width of the element you can see the left/right margin changing along with it.

Look at the margin values in the bottom right (or on the box model)

computed-value