Question about using shorthand for margins and padding

Hello collective brain,
I’m very new, as in less than a week into learning to code, and truly enjoying every bit of this process with the courses on here. I keep running into a snag when working through the styling of the challenges and was hoping someone might help me out by explaining how the sequencing goes when using shorthand. Say I’m setting the margins and I want to use the shorthand instead of typing margin-top, margin- bottom, margin-left, and margin-right with their respective settings I know I can type just margin and then whatever setting I want for each section, where I’m having trouble is remembering the sequence used. ex: form{margin: 20px auto 0 0;} in my example, which spot is the 20px, auto, 0, and 0 representing? And is this the same when using shorthand for padding and width? Why are they in each specific spot? I’m hoping that knowing why they’re in the specific spot they’re in will help me to remember which spots they go in instead of having to continue to try every combination until I get it right every time I use shorthand. Hopefully, my question makes sense. Thank you in advance for your help!

The way I remember this is that the first one is “top” and then the rest go clockwise: “right”, “bottom”, “left”.

Hello and welcome!

Let me use this moment to introduce you to one of the developers best friends, the mdn web docs:

Here to your specific question:

You can’t start early enough using docs, research is a big part of the job.

Oh wow, that’s freaking awesome! Thank you so much. I’ve been googling everything but that site has so much info I could’ve used this last week. I’m so excited to look through it all. I’m the furthest from a computer person so finding all of this to be so fun and that I’m actually doing pretty good is so crazy but I love it. Who’d have thought I’d discover a whole new world and career at 44?! Anyways, thanks again :slight_smile:

Oh neat, I had wondered if that was the pattern when I saw something else went counter-clockwise. Very cool!

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