CSS Padding vs Margin - GeeksforGeeks

24 May, 2021
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.
The different attributes of margin and padding
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript