CSS - margin-left Property

Quiz

CSS margin-left property sets the width of the margin on the left of an element.

Syntax

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

Property Values

Value	Description
auto	The browser sets the margin for left edge automatically. Default.
length	The margin space of left edge is set using length units (e.g. px, em, rem etc.). Negative values are allowed.
percentage	The margin space of left edge 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 Left Property

The following examples explain the margin-left property with different values.

Margin Left Property with Auto Value

To allow the browser to automatically calculate the left margin based on the available space, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding-top: 40px;
         padding-bottom: 40px;
         height: 70px;
         width: 490px;
         border: 2px solid gray;
      }

      .box {
         background-color: lightblue;
         padding: 10px;
         text-align: center;
         width: 30%;
         margin-left: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-left property
   </h2>
   <h4>
      margin-left: auto;
   </h4>
   <div class="container">
      <div class="box">
         This box has margin-left: auto
      </div>
   </div>

</body>

</html>

Margin Left Property with Length Values

To set the left margin, we can specify the margin size using length units (e.g. px, em, rem etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding-top: 40px;
         padding-bottom: 40px;
         height: 70px;
         width: 490px;
         border: 2px solid gray;
      }

      .props {
         background-color: lightblue;
         padding: 10px;
         text-align: center;
         width: 30%;
      }

      .box1 {
         margin-left: 80px;
      }

      .box2 {
         margin-left: 10em;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-left property
   </h2>
   <h4>
      margin-left: 80px;
   </h4>
   <div class="container">
      <div class="box1 props">
         This box has margin-left: 80px
      </div>
   </div>
   <h4>
      margin-left: 10em;
   </h4>
   <div class="container">
      <div class="box2 props">
         This box has margin-left: 10em
      </div>
   </div>

</body>

</html>

Margin Left Property with Percentage Values

To set the left margin, we can specify the margin size using percentage values(e.g. 10% (of the width of the containing element)). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding-top: 40px;
         padding-bottom: 40px;
         height: 90px;
         width: 490px;
         border: 2px solid gray;
      }

      .props {
         background-color: lightblue;
         padding: 10px;
         text-align: center;
         width: 30%;
      }

      .box1 {
         margin-left: 20%;
      }

      .box2 {
         margin-left: 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-left property
   </h2>
   <h4>
      margin-left: 20%;
   </h4>
   <div class="container">
      <div class="box1 props">
         This box has margin-left: 20% 
         of the width of the container
      </div>
   </div>
   <h4>
      margin-left: 50%;
   </h4>
   <div class="container">
      <div class="box2 props">
         This box has margin-left: 50% 
         of the width of the container
      </div>
   </div>

</body>

</html>

Supported Browsers

Property
margin-left	1.0	6.0	1.0	1.0	3.5

css_reference.htm

Print Page