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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   <head>
      <style>
         p
         {
         margin:80px 100px 50px 80px;
         }
      </style>
   </head>
   <body>
      <h1>
         GEEKSFORGEEKS
      </h1>
      <p>
         Margin properties
      </p>
   </body>
</html>

chevron_right



Output:


2. If the margin property has 3 values:

margin:40px 100px 120px;
top = 40px
right and left = 100px
bottom = 120px

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   <head>
      <style>
         p
         {
         margin:80px 50px 100px;
         }
      </style>
   </head>
   <body>
      <h1>
         GEEKSFORGEEKS
      </h1>
      <p>
         Margin properties
      </p>
   </body>
</html>

chevron_right


OUTPUT:


3. If the margin property has 2 values:

margin: 40px 100px;
top and bottom = 40px;
left and right = 100px;

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   <head>
      <style>
         p
         {
         margin:100px 150px;
         }
      </style>
   </head>
   <body>
      <h1>
         GEEKSFORGEEKS
      </h1>
      <p>
         Margin properties
      </p>
   </body>
</html>

chevron_right


OUTPUT:


4. If the margin property has 1 value:

margin: 40px;
top, right, bottom and left = 40px

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   <head>
      <style>
         p
         {
         margin:100px;
         }
      </style>
   </head>
   <body>
      <h1>
         GEEKSFORGEEKS
      </h1>
      <p>
         Margin properties
      </p>
   </body>
</html>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   <head>
      <style>
         p
         {
         margin:80px 100px 50px 80px;
         }
      </style>
   </head>
   <body>
      <h1>
         GEEKSFORGEEKS
      </h1>
      <p>
         Padding properties
      </p>
   </body>
</html>

chevron_right


OUTPUT:

2. If the padding property has 3 values:
padding: 40px 100px 120px;
top = 40px
right and left = 100px
bottom = 120px

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   <head>
      <style>
         p
         {
         padding:80px 50px 100px;
         }
      </style>
   </head>
   <body>
      <h1>
         GEEKSFORGEEKS
      </h1>
      <p>
         Padding properties
      </p>
   </body>
</html>

chevron_right


OUTPUT:


3. If the padding property has 2 values:

padding: 100px 150px;
top and bottom = 100px;
left and right = 150px;

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   <head>
      <style>
         p
         {
         padding: 100px 150px;
         }
      </style>
   </head>
   <body>
      <h1>
         GEEKSFORGEEKS
      </h1>
      <p>
         padding properties
      </p>
   </body>
</html>

chevron_right


OUTPUT:

4. If the padding property has 1 value:

padding: 100px;
top, right, bottom and left = 100px

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   <head>
      <style>
         p
         {
         padding:100px;
         }
      </style>
   </head>
   <body>
      <h1>
         GEEKSFORGEEKS
      </h1>
      <p>
         Padding properties
      </p>
   </body>
</html>

chevron_right


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.
MarginAndPaddingAndBorder

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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


OUTPUT:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.