Skip to content 
If you are new to web design, or even if you have been building websites for a while, you’ve probably heard the terms margins and padding. You may use margins and padding in your design not fully understanding the difference between the two. It is important to understand the two as they serve very different purposes.
The difference between margins and padding is where they create space on your page. Margins add space outside the border of an element. Padding adds space inside the border of an element.
This gives you the general idea of how margins and padding are different, but using these properties in your design requires a more in-depth understanding of the two. I am going to explain more about the differences between margins and padding and how to use them in your web design.
The CSS Box Model
The easiest way to understand what margins and padding do is to visualize them using the CSS Box Model. When you look at a website, it doesn’t look like a bunch of boxes. But, your web design is actually just a bunch of boxes.
Every HTML element is contained in a box. How the box looks in a browser is determined by the space you add in and around the box, and the content contained within the box. If you understand this concept, the differences between margins and paddings will make more sense to you.
As you know, a box has 4 sides to it. With CSS, you can use margins and padding to add space around the outside or inside of the box. The margins and paddings are the invisible space around an element. By using margins and paddings, you can adjust the spacing between elements. You can also adjust how much space the element takes up on the page.
WHAT ARE MARGINS?
Margins are one way to create space in your design. Using margins, you can make each “box” on your page have equal spacing around the entire element. This is very useful for creating consistent spacing on a page. Or, you can use margins to add extra space on top, below, or to the right or left of an element. To do this, you declare the size of the margins with CSS.
Always think of margins as empty transparent space. This may have the effect of moving an element, but margins are actually adding transparent space around an element. If you are using a WordPress page builder like Elementor, WPBakery Builder, or Divi Builder, you don’t have to code the styling on your page, but margins still work the same way.
HOW TO ADD MARGINS IN CSS
If you’ve never worked with CSS, you might find CSS intimidating, but adding margins with CSS is actually pretty easy. Go back to the box model. When you add a margin to the box, it defines the amount of space that surrounds the box. The size of this space is determined (or declared) using CSS. There are several ways to declare margins in CSS, but they are all pretty straightforward and easy to understand.
As a reference, margins can be declared in CSS by using the following margin properties: margin, margin-top, margin-bottom, margin-left, or margin-right. To add space evenly around all sides of an element, use margin. For spacing around specific sides of an element, use the other margin properties.
The “margin” property is the easiest margin to add. It’s a shortcut for when you are adding an equal amount of space around an element. Instead of typing out each individual margin property, you can just use “margin” For example, to add 25px equally around a paragraph element, the CSS would look like this.
p {
margin: 25px;
}
You can also add margins individually like this. In the following example, the top and bottom margin are set to 20px, the right is set to 10 px and the left margin is set to 15 px.
p {
margin-top: 20px;
margin-bottom: 20px;
margin-right: 10px;
margin-left: 15px;
}
Margin Shorthand
The example above is written in longhand CSS. Shorthand CSS is a shorter way of writing CSS that’s often used for margins and padding. It’s more concise and adds less code to your pages.
In shorthand, the margin properties can be written in one line of code. They are written in clockwise order starting at the top. It would look like this.
p {
margin: 20px 10px 20px 15px;
}
To condense this further, it can be written with only 3 values or 2 values.
Margin shorthand using 3 values:
If the right and left margins are the same you can use this shorthand.
p {
margin: 20px 10px 15px;
}
The top margin is 20px, the right and left margin is 10px, and a bottom margin is15px.
Margin shorthand using 2 values
If the top and bottom margins are the same, and the right and left values are the same, you can shorten the CSS to have just two values, like this.
p this case {
margin: 20px 10px;
}
If you remember that margins are always declared in clockwise order, it’s pretty easy to get the hang of shorthand CSS.
WHAT DOES MARGIN COLLAPSING MEAN?
Margins seem pretty simple, right? They are really easy until you start adding top and bottom margins and elements don’t line up the way you expected. That’s when margins can get tricky. This is because of the margin collapsing. It can get confusing, but it’s actually fairly easy to understand, once you understand what margins do. Margins are used to create consistent spacing for elements like paragraphs.
If you define a top and bottom margin for every element, each margin is clearly defined. But, what happens when you have a bottom margin, that bumps into the top margin of the element below it. The two margins are merged together, or collapsed. This is when there can be problems. In order to keep margins working properly, a rule was created for when a top margin and bottom margin touch or overlap.
To put it simply, if a top and bottom margin touch, the margins collapse. The vertical margins will be combined into one margin, using the margin size of whichever margin is larger. This rule only applies to vertical margins, but once understood it will save you a lot of headaches.
The easiest way to keep margins from collapsing in your layouts is to choose to use either a top margin or bottom margin and use one consistently in your layouts. Since you can use negative or positive numbers when defining a margin, you can adjust the elements on your page using only a top margin or a bottom margin.
HOW DO NEGATIVE MARGINS WORK?
The size of a margin can be declared in positive or negative numbers. If you are a beginner, you might not know that you can use a negative number with margins, but why would you do this? For some, negative margins are considered bad practice. There are other ways to position elements on a page, but negative margins can be useful, so long as you understand how they affect other elements on your page.
To understand what a negative margin does, go back to the box model. A positive margin adds space. A negative margin takes away space. If you reduce the space between two elements, it can cause the two to overlap.
When you use a negative margin, it will nudge the margins on all of the following elements as well. This is generally not a problem, but it can cause issues, with the margins that precede it.
WHAT IS PADDING?
Padding is another important aspect of web design. It is used to pad the inside of an element within a page. Unlike margins, padding can only use positive values. You can add space around an element, but you can’t use padding to subtract space. If you think about the purpose of padding this makes sense.
Essentially, padding adds spacing between the border of an element and the content contained inside. It can be used to add space universally around an element, or individually using top, bottom, right or left padding.
If you are using a WordPress page builder, padding can be added without coding the CSS, but you should understand how to add padding with CSS. Even if you have never used coding in your web design, understanding how to use CSS will improve your web design skills, and allow you to add more advanced styling to your pages.
HOW TO ADD PADDING IN CSS
To add padding in CSS, declare the size of the spacing you want around an element. Like margins, you can use top, bottom, right, and left padding or you can use padding to set the size of padding to be the same on all four sides.
Padding is declared in CSS using the following padding properties: padding, padding-top, padding-bottom, padding-left, or padding-right. The “padding” property is used to add space evenly around an element. Individual padding properties are used to add space around specific sides of an element.
Let’s look at how this works. In the following example, the padding size around all four surrounding areas of the div element is 10px.
div {
padding: 10px;
}
You can define padding like this or you can use shorthand.
div {
padding-top: 10px;
padding-right: 25px;
padding-bottom: 15px;
padding-left: 20px;
}
Padding Shorthand
Write padding properties in clockwise order starting with the top padding.
div {
padding: 10px 25px 15px 20px;
}
Padding shorthand using 3 values:
Write padding shorthand the same way as margin shorthand. For three values, it would look like this declaring the top, right and left, and bottom padding
div {
padding: 10px 10px 20px;
}
In this example the top padding is 10 px. Right and left padding is 10px and bottom padding is 20px.
Padding shorthand using 2 values
If the top and bottom padding are the same and the right and left padding are the same it looks like this.
div {
padding: 20px 10px;
}
MAIN DIFFERENCE BETWEEN MARGINS AND PADDING
Now that you have a basic understanding of the difference between margins, how do you decide when to use margins and when to use padding? The two CSS properties have completely different purposes, but there are a few easy ways to decide which to use.
Use Margins To:
- Create space between different adjacent elements on a page.
- Move an element’s position on a page.
- Margins can use negative or positive numbers to define the spacing between elements, padding can not.
- Margins allow you to overlap elements on your page.
Use Padding To:
- Add white or transparent space around an element.
- To fill the empty space around content with a background color or image, margins cannot.
- Change the size of an element, such as the size of a button, margins cannot.
- Allows you to use positive numbers to define the space around the inside border of an element.
NOW THAT YOU KNOW THE DIFFERENCE BETWEEN MARGINS AND PADDING
This should give you a better understanding of the difference between margins and padding. The more comfortable you get using CSS in your web design, the better your pages will look. Understanding when and how to use margins and padding within your layout will allow you to create cleaner pages and more advanced designs.
