Some CSS properties are very easy to understand, like background-color, text-align, and font-size. Other CSS properties aren’t so straight forward and require you to experiment with them a bit before truly understanding how they work with HTML elements. Today we’re going to work on understanding the difference between padding and margin in CSS.
Before we go into understanding the difference between the two, we need to first tackle how to write them in CSS. There are quite a few different ways to write this in CSS because there is “longhand” and “shorthand” for this.
Padding and Margin in CSS
Longhand version of this is actually the easiest to understand because it’s like how you write all the other CSS:
On the other hand, shorthand CSS for this combines all of those different properties into one property “padding”.
padding: 10px 20px 40px 10px;
Padding and margin have 4 sides to them, right? You have the top, right, bottom, and left side of your box. In our “shorthand” shown above we have 4 values, each separated by a space. The first of the 4 values is top padding, then right padding, bottom padding, and left padding. Think of it like going clockwise around the sides of a box, starting at the top.
padding: TOP RIGHT BOTTOM LEFT;
But wait, the shorthand gets shorter!
padding: TOP RIGHT/LEFT BOTTOM;
Instead of having 4 values, you can shorten them down to 3 values if your left and right padding/margin is the same. So if my top padding was 30px, left and right padding was 10px and my bottom padding was 40px, I would use this CSS:
padding: 30px 10px 40px;
Cutting down the values to 2!
Now if you’re top and bottom padding/margin are the same AND your right and left padding/margin are the same, then we can use only 2 values in our short hand. In this example, we have a top and bottom padding that is 10px and a left and right padding that is 20px. In our CSS that would look like this:
padding: TOP/BOTTOM RIGHT/LEFT;
padding: 10px 20px;
Only 1 value!
Our final version of the shorthand for padding and margin has only one value to it. You can use this if you want all sides of the box (top, bottom, right, and left) to be the exact same value. If we wanted all sides of our padding to be 20px, then our CSS would look like this:
And that my friends is all the different ways to write out padding and margin in longhand and shorthand.
When do you use one over the other? Preference! I often switch between all of them depending on what I feel is fastest for what I need. For example, if I only need to apply bottom margin to an element, I would use longhand since I really only need to apply it to one side: margin-bottom: 30px;
The more you practice writing these out on a real website, the more you’ll begin to understand how to write these out and memorize them. Practice, practice, practice!
How Padding and Margin Work
While padding and margin often act similarly when you see it in action, there is a marked difference between the two. Padding is used to push space out INSIDE of an HTML’s box area. So padding is always on the inside of the html box. Unlike padding, “margin” in CSS is used to push space out around the OUTSIDE of an HTML’s box area.
Think of it like padding is adding additional winter coats around yourself. The coats are still part of you, but if I threw paint on you with your coats on, it would cover a wider surface than if you didn’t have any of the thick winter coats on. Odd analogy, I know. You can also think of padding like actual padding in a cardboard box. When you add padding, like say styrofoam peanuts to your box, you’re keeping the contents of the box away from the edges of the box. Padding in CSS does the same thing. Now think of “margin” like giving yourself an invisible force-field. The force-field isn’t really part of you or touching you, but it keeps other things away from you. Going back to that coat and paint example, if I threw paint on you and it was able to get through the force-field, then it would still only cover you and your coats.
Padding and Margin in a Website Example
Let’s think about it in terms of real CSS values. We’ll start with a paragraph(p tag) and then we add a background color to it and add 30px of padding to each side of the p tag.
Below on the left you can see what the paragraph looks like with 30px of padding around it. With the image on the right, I used Chrome tools to show you where the padding actually starts/ends for this box. That green color in the image below is the padding that goes around the box. You can see that the dark blue background color fills in where the padding is.
Now let’s add some margin to our paragraph. I’ll add 30px of top and bottom margin and 20px of left and right margin. The image on the left below shows how that paragraph has changed with this margin. The actual width of the image has gotten smaller because the margin is pushing away from the edges of the other HTML element. On the right you can see that the color orange is the margin now around the box. So margin always sits outside of the padding and the dark blue background color doesn’t extend into the margin area.
If you’re still confused as to how to use padding vs margin, then it’s time to experiment! The more you use CSS and change values around, the more you’ll understand how it works. Let me know if you have any questions though :)