1. css
  2. /properties
  3. /margin-left



The margin-left property sets the left margin of an element. It specifies the space between the element's left edge and the adjacent elements in the document flow. A positive value moves the element to the right, while a negative value moves the element to the left.


Set the left margin of a paragraph to 50 pixels:

p {
  margin-left: 50px;

Set the left margin of an unordered list to -10 pixels:

ul {
  margin-left: -10px;

Set different left margins for different levels of nested ordered lists:

ol {
  margin-left: 20px;
ol ol {
  margin-left: 40px;
ol ol ol {
  margin-left: 60px;


<length>Specifies a fixed length for the margin in pixels, ems, rems, etc.
<percentage>Specifies a percentage of the width of the containing element.

Best Practices

  • Avoid using negative margin values whenever possible, as they can cause elements to overlap and make the layout difficult to read.
  • Use the margin shorthand property instead of setting margin-left separately, especially if you need to set multiple margin values.
  • Don't use margin-left to create columns in a layout. Instead, use CSS grid or flexbox for this purpose.
  • Use relative units (ems, rems, etc.) instead of pixels for more flexible layouts that adapt to different screen sizes and devices.
  • Consider using a CSS preprocessor like Sass or Less to simplify the process of setting margin values and avoid repetitive code.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera