margin-left

Definition

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.

Examples

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;
}

Values

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