In today's article, we'll look at the three CSS properties - Margin, Padding, and Gap - the differences among them and when you should use which one.
You might wonder - what's the difference between Margin and Padding and which is right for creating space.
Let's get started.
What Is CSS Margin?
The CSS Margin property is used to create the space outside of an HTML element.
For example, if you have two paragraphs in a div container stacked on top of each other, you can increase or decrease the space between them.
This can easily be achieved by using margin. So, let's see a practical example.
Suppose you have two paragraphs on your website, like the following.
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, aut dolor quasi adipisci ipsum voluptas officiis accusamus voluptatum reiciendis itaque ratione incidunt maiores architecto excepturi pariatur. Voluptates rerum hic enim!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, aut dolor quasi adipisci ipsum voluptas officiis accusamus voluptatum reiciendis itaque ratione incidunt maiores architecto excepturi pariatur. Voluptates rerum hic enim!</p>
</div>
You can simply add the margin between the two paragraphs like the following:
p {
background-color: hsl(240, 62%, 90%);
margin: 24px;
}
As you can notice, we've added a background color to both paragraphs to differentiate the two.
By changing the margin value, you can adjust the spacing between the paragraphs as you wish.
Negative Margin
Unlike Padding and Gap, you can have negative margins.
It means that you can use negative values for margins in case you want to, let's say, overlap two elements.
What Is CSS Padding?
The CSS Padding property is used to create space inside an HTML element.
For example, let's take the above example.
We'll add some padding to each element, like the following.
p {
padding: 24px;
}
Notice how there's more space inside each paragraph.
As you can see above, Padding controls the space on the inner four sides of the element.
What Is CSS Gap?
The CSS Gap property is used to create space between the items.
Unlike Margin and Padding, it only works with the CSS Grid, CSS Flexbox, and CSS multi-column layouts.
Using the above example, we'll change the display of the div container to Grid and add a gap, like the following.
.container {
display: grid;
gap: 64px;
margin: 64px;
padding: 64px;
}
As you can see, we've added some margin and padding to the grid container to better illustrate all three properties.
You can learn more about CSS Gap in this article.
Difference Between Padding and Margin (Padding vs Margin)
Generally, sometimes people need clarification about margins and paddings in CSS.
If you're a web designer, you've probably used both margin and padding to create UIs and other website layouts.
Margin is the space outside the element, while Padding is the space inside the element.
You should note that adding padding increases the size of the element.
CSS Box Model
There's a concept of CSS Box Model, which means that every HTML element has a box design or is a block.
Let's say that this box is invisible by default or has a white background.
So, when you add a background color, border, padding, margin, or anything else to an HTML element, all these CSS properties apply the effect on that box.
If you use the browser DevTools to inspect any web page, notice that the inspector highlights all the elements on the page as a box or blocky design.
Below is the CSS Box Model of the layout we've worked on in this tutorial.
You can further read about the CSS Box Model on this MDN page.
Conclusion
That's all. In this guide, you learned about Margins, Paddings, and Gaps.
If you have any questions or need help with clarification of all three properties, let me know via the email at [email protected].
Frequently Asked Questions About Margin vs Padding vs Gap in CSS
Is Padding the Same as the Margin?
No, Padding is not the same as the Margin. Padding is the element's personal space or space inside the border in terms of the CSS Box Model.
On the other hand, the Margin is the space around the content or space around an element.
Read the differences between the Margin and Padding properties above in the tutorial.
Is It Better to Use Padding or Margin?
There is no one better than the other. It all depends on the web design or website layout use case.
If you want to add a whitespace for the area around the content but not outside the content's box model, use Padding to achieve that. If you want a top and bottom space for the elements horizontally, you can use the Margin.
Can I Only Use Gap Instead of Both Margin and Padding?
You should use the CSS Gap property for spacing, depending on your situation.
For example, if you're creating a grid layout (items arranged in columns and rows), you can use the gap property to create a space or white space between the grid items. Learn more about it above in the tutorial.
Additional Resources
You can read more about the technologies mentioned above in the following links.
- Element (Source: MDN)
- Whitespace (Source: MDN)
- <div>: The Content Division element (Source: MDN)
