X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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.

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

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

Another example where the left margin of the element is defined as "8em":

Example

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

Here the left margin is specified by "em", "px" and "%" to show the difference:

Example

<!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
auto Sets the left margin. It is the default value of this property.
length Defines a left margin in px, pt, cm, etc. Default value is 0.
% Sets the left margin in % of containing element.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Practice Your Knowledge

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


Prev
Next

Do you find this helpful?

Related articles