CSS margin-left Property

Margin is the spacing outside an element.

The margin-left property specifies the left margin of an element.

Example

#

An element with a 50-pixel margin-left.

An element with a 50px left margin.
<div style="margin-left: 50px; background: aliceblue;">
  An element with a 50px left margin.
</div>

Using margin-left

The margin-left property accepts any length value, such as, px, %, em, etc.

Margin values can be positive or negative.

Syntax

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

Values

#

Value Description
length Sets the left margin using any CSS length value. Negative values are allowed.
% Sets left margin in percent.
auto Browser calculates a left margin.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different margin-left values.

margin-left: 5%
<style>
  .margin-example {
    background: aliceblue;
    margin-left: 5%;
    padding: 10px;
  }
</style>

<div class="margin-example">
  margin-left: 5%
</div>

Browser support

This table shows when margin-left support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
6.0 Aug 2001
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides