CSS Margins and Padding - GeeksforGeeks

05 Apr, 2022
In this article, we will learn about the CSS Margin & Padding properties of the Box Model & understand their implementation through the example. 
CSS Margins: CSS margins are used to create space around the element. We can set the different sizes of margins for individual sides(top, right, bottom, left).
Margin properties can have the following values:
Length in cm, px, pt, etc.
Width % of the element.
Margin calculated by the browser: auto.
Syntax: 
body
{
    margin: size;
}
The margin property is a shorthand property having the following individual margin properties:
margin-top: It is used to set the top margin of an element.
margin-right: It is used to set the right margin of an element.
margin-bottom: It is used to specify the amount of margin to be used on the bottom of an element.
margin-left: It is used to set the width of the margin on the left of the desired element.
Note: The margin property allows the negative values.
We will discuss all 4 properties sequentially.
If the margin property has 4 values: 
margin: 40px 100px 120px 80px;
top = 40px
right = 100px
bottom = 120px
left = 80px
Example:  This example describes the margin property by specifying the four values.
HTML
<html> <head>    <style>    p {        margin: 80px 100px 50px 80px;    }    </style></head> <body>    <h1>         GeekforGeeks      </h1>      <p> Margin properties </p>  </body> </html>
Output:
If the margin property has 3 values: 
margin: 40px 100px 120px; 
top = 40px
right and left = 100px
bottom = 120px
Example: This example describes the margin property by specifying the three values.
HTML
<html> <head>    <style>    p {        margin: 80px 50px 100px;    }    </style></head> <body>    <h1>         GeeksforGeeks      </h1>      <p> Margin properties </p>  </body> </html>
Output:
If the margin property has 2 values:
margin: 40px 100px; 
top and bottom = 40px;
left and right = 100px;
Example:  This example describes the margin property by specifying the double value.
HTML
<html> <head>    <style>    p {        margin: 100px 150px;    }    </style></head> <body>    <h1>         GeeksforGeeks      </h1>      <p> Margin properties </p>  </body> </html>
Output:
If the margin property has 1 value: 
margin: 40px; 
top, right, bottom and left = 40px
Example: This example describes the margin property by specifying the single value.
HTML
<html> <head>    <style>    p {        margin: 100px;    }    </style></head> <body>    <h1>         GeeksforGeeks      </h1>      <p> Margin properties </p>  </body> </html>
Output:
CSS Padding: CSS paddings are used to create space around the element, inside any defined border. We can set different paddings for individual sides(top, right, bottom, left). It is important to add border properties to implement padding properties.
Padding properties can have the following values: 
Length in cm, px, pt, etc.
Width % of the element.
Syntax:  
body
{
    padding: size;
}
The padding CSS shorthand property can be used to specify the padding for each side of an element in the following order:
padding-top: It is used to set the width of the padding area on the top of an element.
padding-right: It is used to set the width of the padding area on the right of an element.
padding-bottom: It is used to set the height of the padding area on the bottom of an element.
padding-left: It is used to set the width of the padding area on the left of an element.
Note: The padding property allows the negative values.
We will discuss all these 4 properties sequentially.
If the padding property has 4 values: 
padding: 40px 100px 120px 80px; 
top = 40px
right = 100px
bottom = 120px
left = 80px
Example: This example describes the padding property by specifying the 4 values.
HTML
<html> <head>    <style>    p {        padding: 80px 100px 50px 80px;        border: 1px solid black;    }    </style></head> <body>    <h1>GeeksforGeeks</h1>      <p>Padding properties</p>  </body> </html>
Output:
If the padding property has 3 values:
padding: 40px 100px 120px; 
top = 40px
right and left = 100px
bottom = 120px
Example: This example describes the padding property by specifying the 3 values.
HTML
<html> <head>    <style>    p {        padding: 80px 50px 100px;        border: 1px solid black;    }    </style></head> <body>    <h1>GeeksforGeeks</h1>      <p>Padding properties</p>  </body> </html>
Output:
If the padding property has 2 values: 
padding: 100px 150px; 
top and bottom = 100px;
left and right = 150px;
Example: This example describes the padding property using a double value.
HTML
<html> <head>    <style>    p {        padding: 100px 150px;        border: 1px solid black;    }    </style></head> <body>    <h1>GeeksforGeeks</h1>      <p>Padding properties</p>  </body> </html>
Output:
If the padding property has 1 value:
padding: 100px; 
top, right, bottom and left = 100px
Example: This example describes the padding property using a single value.
HTML
<html> <head>    <style>    p {        padding: 100px;        border: 1px solid black;    }    </style></head> <body>    <h1>GeeksforGeeks</h1>      <p>Padding properties</p>  </body> </html>
Output:
Difference between Margin and Padding:
Margin is used to create space around elements and padding is used to create space around elements inside the border.
We can set the margin property to auto but we cannot set the padding property to auto.
In Margin property we can allow negative or float number but in padding we cannot allow negative values.
Margin and padding target all 4 sides of the element. Margin and padding will work without the border property also. The difference will be more clear with the following example.
Example: This example describes the margin & padding properties around the content.
HTML
<!DOCTYPE html><html> <head>    <style>    h2 {        margin: 50px;        border: 70px solid green;        padding: 80px;    }    </style></head> <body>    <h1>GeeksforGeeks</h1>    <h2>         Padding properties      </h2></body> </html>
Output:
Supported Browser:
Google Chrome 1.0
Internet Explorer 3.0
Microsoft Edge 12.0
Firefox 1.0
Opera 3.5
Safari 1.0
ysachin2314
bhaskargeeksforgeeks
itskawal2000
CSS-Basics
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills