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> |
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> |
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> |
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> |
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> |
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> |
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> |
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> |
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> |
OUTPUT:
leave a comment
0 Comments