TLDR: Margin is outside of border around the content/element; Padding is within border the content/element.
Anyway, since I use CSS literally all the time, I wanted to take a second to clarify a seemingly subtle (but useful and important) difference that took me a little bit to get back when I was first learning CSS, and that is the difference between the margin and padding properties.
Now, this is not terribly complex, but the big thing that you need to remember is that the difference lies in the relation to the content.
If we think about the border around the content as being able to push in or out, the margin property has to do with the amount of space would be pushing out. You can potentially see the margin property given generally or you can see it broken down into
margin-left. If it is given by itself, and you see a single value listed:
That means that the
margin-left values are all 5px. If you instead see it with two values:
margin: 5px 3px;
We read it based on a clockwise motion. So in this case, we would have
margin-bottom at 5px and
margin-left at 3px. If you see three values:
margin: 5px 3px 2px;
We still read it based on a clockwise motion and, in this case, we would have
margin-top at 5px,
margin-left at 3px, and
margin-bottom at 2px. If you do see four values though, this is one for each and we still read in a clockwise motion:
margin: 5px 3px 2px 1px;
margin-top at 5px,
margin-right at 3px,
margin-bottom at 2px, and
margin-left at 1px).
Now for the padding property. If we go back to the pushing in or out idea, the padding property has to do with the amount of space would be pushing in. Padding is the amount of space between the content and its border aka within the element itself.
Like with margin, padding can take up to four values and is read in the exact same way (clockwise). But one more difference that is worth mentioning is that, while margin can take negative values, padding cannot take negative values.
All in all, these are two very important properties to master, as they are super helpful for working out your layout and figuring out spacing on the page. And while the differences may seem subtle, keep them straight and you'll be on your way to some beautiful design work!