CSS - Margins

First Page
Next Page

CSS Margins

The CSS margin property defines the margin on all sides of an element.

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 −

  • Length in cm, px, pt, etc.

  • Width % of the element.

  • Margin calculated by the browser: auto.

Syntax

body
{
    margin: size;
}

If the margin property has 4 values

margin: 50px 110px 130px 90px;

  • top = 50px

  • right = 110px

  • bottom = 130px

  • left = 90px

Example

<!DOCTYPE>  
<html>
   <head>
      <style>
         p
         {
         margin:70px 105px 55px 85px;
         }
      </style>
   </head>
   <body>
      <h1>
         HTMLTPOINT
      </h1>
      <p>
         Margin properties
      </p>
   </body>
</html>

Result

If the margin property has 3 values

margin:45px 105px 125px;

top = 45px

right and left = 105px

bottom = 125px

Example

<!DOCTYPE>  
<html>
   <head>
      <style>
         p
         {
         margin:85px 55px 110px;
         }
      </style>
   </head>
   <body>
      <h1>
         HTMLTPOINT
      </h1>
      <p>
         Margin properties
      </p>
   </body>
</html>

Result

If the margin property has 2 values

margin: 50px 100px;

top and bottom = 50px;

left and right = 100px;

Example

<!DOCTYPE> 
<html>
   <head>
      <style>
         p
         {
         margin:100px 140px;
         }
      </style>
   </head>
   <body>
      <h1>
         HTMLTPOINT
      </h1>
      <p>
         Margin properties
      </p>
   </body>

Result

First Page
Next Page