Seemingly Subtle Differences: Padding vs. Margin

TLDR: Margin is outside of border around the content/element; Padding is within border the content/element.

If you're like me, your initial foray into development/programming is/was into HTML and CSS. Even now, as I do a lot of JavaScript-based development, the principles I learned then are extremely relevant. (Sure, a lot of this can be attributed to the general importance/power of CSS and JSX being so seemingly similar to HTML, but bear with me.)

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-top, margin-right, margin-bottom, margin-left. If it is given by itself, and you see a single value listed:

margin: 5px;

That means that the margin-top, margin-right, margin-bottom, and 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-top and margin-bottom at 5px and margin-right 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-right and 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!