Tutorialspoint.dev

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>

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

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



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter