CSS margin-left Property

CSS margin-left property sets the margin of the left of an HTML element. The margin value can be specified in any valid CSS length formats such as ‘px’, ’em’, ‘rem’ or even in percentage(%).

It can have a positive, negative or zero value.

Example:

.p1{
  margin-left: 20px;
}
.p2{
  margin-left: 3em;
}
.p3{
  margin-left: 10%;
}

It is also possible to set a negative margin value. In this situation, the element pulls itself in the left direction and its content is clipped if enough space is not available. See the example below:

Example:

p{
  margin-left: -60px;
}

CSS Syntax

The margin-left property has the following syntax:

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

Property Values

The margin-left property accepts the following values:

lengthSets a fixed left margin in CSS length formats such as ‘px’, ’em’, ‘rem’, etc. It can be positive, negative or zero. The default value is zero(0).
percentageSets left margin in percentage. The percentage value is calculated by taking the percentage of the element’s width itself.
autoThe browser itself calculates the margin value.
initialSets the margin-left property to its default value(0).
inheritInherits the margin-left property from the parent element.

General Info

Default Value0
InheritedNo
JavaScript Usageelement.style.marginLeft = “50px”