CSS margin-left Property

The margin-left property is used to define how much the left margin of the element will be set.

There are some rare situations when width, margin-left, border, padding, the content area and margin-right are defined. When it happens, the margin-left will be ignored and it will be set as if the auto value is defined.

The margin-left property is defined as the keyword <auto>, <percentage> or a <length>. Its value may be negative, positive or zero.

Watch a video course   CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Negative values are allowed.

Initial Value 0
Applies to All elements. It also applies to ::first-letter.
Inherited No.
Animatable Yes. Left margin of the element is animatable.
Version CSS2
DOM Syntax object.style.marginLeft = "20px";

Syntax

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

Example of the margin-left property defined as "px":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .left {
        margin-left: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-left property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Result

Example of the margin-left property defined as "em":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .left {
        margin-left: 8em;
      }
    </style>
  </head>
  <body>
    <h2>Margin-left property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Example of the margin-left property defined as "px", "em" and "%":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.p1 {
        margin-left: 6em;
      }
      p.p2 {
        margin-left: 40px;
      }
      p.p3 {
        margin-left: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Margin-left property example</h2>
    <p>No specified margin.</p>
    <p class="p1"> Left margin is set to 6em.</p>
    <p class="p2">Left margin is set to 40px.</p>
    <p class="p3">Left margin is set to 10%.</p>
    <p>No specified margin</p>
  </body>
</html>

Values

Value Description Play it
auto Sets the left margin. It is the default value of this property. Play it »
length Defines a left margin in px, pt, cm, etc. Default value is 0. Play it »
% Sets the left margin in % of containing element. Play it »
initial Makes the property use its default value. Play it »
inherit Inherits the property from its parents element.

Browser support
1.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

In the following code snippet, what value is given for the left margin: margin: 10px 15px 7px 20px;


Prev
Next

Related Resources

Do you find this helpful?

Related articles