CSS - margin Property

Previous
Quiz
Next

CSS margin property is used to create space around an element, outside of its border. It is a shorthand property for defining values of properties: margin-top, margin-right, margin-bottom and margin-left in one single statement.

Syntax

margin: auto | length | percentage | initial | inherit;

Property Values

Value Description
auto The browser sets the margins of all four borders automatically.
length The width of the margin is set using length units (e.g. px, em, rem etc.).
percentage The width of the margin is set using percentage values (e.g. 10%) relative to the containing element.
initial It sets the property to its default value.
inherit It inherits the property from the parent element.

Examples of CSS Margin Property

The following examples explain the margin property with different values.

Margin Property with Auto Value

To allow the browser to automatically calculate the margin for the borders, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         background-color: lightblue;
         padding: 10px;
         margin: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin property
   </h2>
   <h4>
      margin: auto
   </h4>
   <p>
      TutorialsPoint is an online educational platform 
      offering a wide range of resources and tutorials 
      for learners at various levels. It provides 
      comprehensive, self-paced learning materials 
      across numerous subjects, including programming, 
      web development, data science, and many other 
      technical and non-technical fields.
   </p>

</body>

</html>

Margin Property with Length Values

To set the margin of the borders, we can specify the width of the margin in length units (e.g. px, em, rem etc.). It accepts upto four values. Depeding on the number of values provided, the corresponding borders will be affected. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2f2f2;
         padding: 10px;
      }

      p {
         background-color: lightblue;
         padding: 10px;
      }

      .one {
         margin: 10px;
      }

      .two {
         margin: 10px 25px;
      }

      .three {
         margin: 10px 15px 30px;
      }

      .four {
         margin: 10px 15px 30px 45px;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin property
   </h2>
   <div class="container">
      <h4>
         margin: 10px (applied to all four borders)
      </h4>
      <p class="one">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 10px 25px (10px applied to top and 
         bottom borders, 25px applied to left and 
         right borders)
      </h4>
      <p class="two">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 10px 15px 30px (10px applied to 
         top border, 15px applied to left and right 
         borders, 30px applied to bottom border)
      </h4>
      <p class="three">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 10px 15px 30px 45px (10px applied to 
         top border, 15px applied to right border, 45px 
         applied to bottom border and 45px applied to 
         left border)
      </h4>
      <p class="four">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
   </div>
</body>

</html>

Margin Property with Percentage Values

To set the margin of the borders, we can specify the width of the margin in percentage values (e.g. 10% relative to the size of the containing element.). It accepts upto four values. Depeding on the number of values provided, the corresponding borders will be affected. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2f2f2;
         padding: 10px;
      }

      p {
         background-color: lightgreen;
         padding: 10px;
      }

      .one {
         margin: 6%;
      }

      .two {
         margin: 6% 4%;
      }

      .three {
         margin: 6% 8% 5%;
      }

      .four {
         margin: 6% 5% 7% 8%;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin property
   </h2>
   <div class="container">
      <h4>
         margin: 6% (applied to all four borders)
      </h4>
      <p class="one">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 6% 4% (6% applied to top and bottom 
         borders, 4% applied to left and right borders)
      </h4>
      <p class="two">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 6% 8% 5% (6% applied to top border, 
         8% applied to left and right borders, 5% 
         applied to bottom border)
      </h4>
      <p class="three">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 6% 5% 7% 8% (6% applied to top border, 
         5% applied to right border, 7% applied to 
         bottom border and 8% applied to left border)
      </h4>
      <p class="four">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
   </div>
</body>

</html>

Note: The margin property accepts upto four values, so depending on the number of values specified, the corresponding borders will be affected.

  • One Value: If single value is given, the same margin width is applied to all four borders.
  • Two Values: If two values are given, the first value sets the top and bottom margin widths while the second value sets the left and right margin widths.
  • Three Values: If three values are given, the first value set the top margin width, second value sets the right and left margin widths and third value set the bottom margin width.
  • Four Values: If four values are given, the first value sets the top margin width, second value sets the right margin width, third value sets the bottom margin width and fourth value sets the left margin width.

Supported Browsers

Property Chrome Edge Firefox Safari Opera
margin 1.0 6.0 1.0 1.0 3.5
css_reference.htm
Print Page
Previous
Next
Advertisements