CSS margin-left

The CSS margin-left property is used to create left margin around specified element, or around the border of specified element (if element has a border). For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin-left: 120px;}
   </style>
</head>
<body>
   
   <div>This DIV has a left margin of 120px</div>
   
</body>
</html>

Output

This DIV has a left margin of 120px

CSS margin-left Syntax

The syntax of margin-left property in CSS, is:

margin-left: x;

The value of x should be any of the following:

auto - used to allow browser to create left margin. The default value is 0.
length - used to create custom sized left margin.
initial - used to use the default value
inherit - used to use the value inherited by the parent element

Note - To learn about margin in detail, refer to its separate tutorial.

CSS margin-left Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a, .b{border: 2px solid blue;}
      .b{margin-left: 80px; padding: 12px;}
   </style>
</head>
<body>
   
   <div class="a">
      <div class="b">This DIV has a left margin of 80px</div>
   </div>
   
</body>
</html>

Output

This DIV has a left margin of 80px

CSS Online Test

« Previous Tutorial Next Tutorial »