CSS | Margins and Padding
CSS Margins
CSS margins are used to create space around the element. We can set the different size of margins for individual sides(top, right, bottom, left).
Margin properties can have following values:
1. Length in cm, px, pt, etc.
2. Width % of the element.
3. Margin calculated by the browser: auto.
Syntax:
body
{
margin: size;
}
1. If the margin property has 4 values:
margin: 40px 100px 120px 80px;
1. top = 40px
2. right = 100px
3. bottom = 120px
4. left = 80px
Example:
<html> <head> <style> p { margin:80px 100px 50px 80px; } </style> </head> <body> <h1> GEEKSFORGEEKS </h1> <p> Margin properties </p> </body> </html> |
chevron_right
filter_none
Output:
2. If the margin property has 3 values:
margin:40px 100px 120px;
top = 40px
right and left = 100px
bottom = 120px
Example:
<html> <head> <style> p { margin:80px 50px 100px; } </style> </head> <body> <h1> GEEKSFORGEEKS </h1> <p> Margin properties </p> </body> </html> |
chevron_right
filter_none
OUTPUT:
3. If the margin property has 2 values:
margin: 40px 100px;
top and bottom = 40px;
left and right = 100px;
Example:
<html> <head> <style> p { margin:100px 150px; } </style> </head> <body> <h1> GEEKSFORGEEKS </h1> <p> Margin properties </p> </body> </html> |
chevron_right
filter_none
OUTPUT:
4. If the margin property has 1 value:
margin: 40px;
top, right, bottom and left = 40px
Example:
<html> <head> <style> p { margin:100px; } </style> </head> <body> <h1> GEEKSFORGEEKS </h1> <p> Margin properties </p> </body> </html> |
chevron_right
filter_none
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 following values:
1. Length in cm, px, pt, etc.
2. Width % of the element.
Syntax:
body
{
padding: size;
}
1. If the padding property has 4 values:
padding: 40px 100px 120px 80px;
top = 40px
right = 100px
bottom = 120px
left = 80px
Example:
<html> <head> <style> p { margin:80px 100px 50px 80px; } </style> </head> <body> <h1> GEEKSFORGEEKS </h1> <p> Padding properties </p> </body> </html> |
chevron_right
filter_none
OUTPUT:
2. If the padding property has 3 values:
padding: 40px 100px 120px;
top = 40px
right and left = 100px
bottom = 120px
Example:
<html> <head> <style> p { padding:80px 50px 100px; } </style> </head> <body> <h1> GEEKSFORGEEKS </h1> <p> Padding properties </p> </body> </html> |
chevron_right
filter_none
OUTPUT:
3. If the padding property has 2 values:
padding: 100px 150px;
top and bottom = 100px;
left and right = 150px;
Example:
<html> <head> <style> p { padding: 100px 150px; } </style> </head> <body> <h1> GEEKSFORGEEKS </h1> <p> padding properties </p> </body> </html> |
chevron_right
filter_none
OUTPUT:
4. If the padding property has 1 value:
padding: 100px;
top, right, bottom and left = 100px
Example:
<html> <head> <style> p { padding:100px; } </style> </head> <body> <h1> GEEKSFORGEEKS </h1> <p> Padding properties </p> </body> </html> |
chevron_right
filter_none
OUTPUT:
Difference Between margin and Padding
Margin is used to create space around element and padding is used to create space around element inside the border.
Margin and padding target all the 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:
<!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> |
chevron_right
filter_none
OUTPUT:
Recommended Posts:
- CSS | padding-right Property
- CSS | padding-top Property
- CSS | Scroll Padding top
- CSS | Scroll Padding
- CSS | Scroll Padding bottom
- CSS padding-bottom Property
- CSS | padding-left Property
- HTML | DOM Style padding Property
- How to make a Pagination using HTML and CSS ?
- jQuery Interview Questions and Answers | Set-2
- Create a Search Bar using HTML and CSS
- How to create Right Aligned Menu Links using HTML and CSS ?
- Slide Down a Navigation Bar on Scroll using HTML, CSS and JavaScript
- How to load jQuery code after loading the page?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
