CSS Padding vs Margin
Last Updated :
05 Jun, 2023
In this article, we will explain the difference between CSS padding and margin.
Margin: It is the space around an element. Margins are used to move an element up or down on a page as well as left or right. Margin is completely transparent, and it does not have any background color. It clears the area around the element. Each side of the element has a margin size you can change individually. In creating the gap, the margin pushes adjacent elements away.
Padding: It is the space between the element and the related content inside it. It determines how elements look and sit within a container. It also shows the container background around the element in it. Padding can be affected by background colors as it clears the area around the content. To create the gap, it either grows the element size or shrinks the content inside. By default, the size of the element increases.
When to use Margin and Padding?
- When you are adjusting the layout of your design, you will need to determine whether to adjust the margins or the padding. If the width of your page is fixed, centering an element horizontally is very simple, just assign the value margin: auto. You would also use the margin to set the distance between nearby elements.
- You would change the padding if you want to create the space between the element and the edge of the container, or border.
Note: Margins are used to add spaces between an image and the description of that image.
CSS Padding is used if we want to create a space between an element and the edge of the container or the border. It is also useful in the requirement of changing the size of the element.
CSS code:
.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
Complete code:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<p class="center">
This element is centered.
</p>
<p class="outside">
The element is positioned outside of its corner.
</p>
</body>
</html>
|
Output:
Element outside corner
Note: When there is an increase in the padding value, the text will remain the same, but the surrounding space will increase.
CSS code:
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
Complete code:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>
</body>
</html>
|
Output:
moderate and huge padding
The tabular difference between Padding and Margin.
| Margin |
Padding |
| The outer space of an element i.e. margin is the space outside the border. |
The inner space of an element i.e.padding is space inside the element’s border. |
| It can be negative or any float number. |
It does not allow negative values. |
| We can set the margin to auto. |
We cannot set the padding to auto. |
| Styling of an element such as background color does not affect the margin. |
Padding is affected by the styling of an element, such as background color. |
The different attributes of margin and padding
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...