CSS: margin-left property
This CSS tutorial explains how to use the CSS property called margin-left with syntax and examples.
Description
The CSS margin-left property defines the margin on the left side of an element.
Syntax
The syntax for the margin-left CSS property is:
margin-left: value;
Parameters or Arguments
- value
The margin to apply to the left side of the element. It can be one of the following:
Value Description fixed Fixed value expressed in px, em, ...
div { margin-left: 4px; }
div { margin-left: 3em; }percentage Percentage value
div { margin-left: 5%; }auto Used for centering blocks
div { margin-left: auto; }inherit Element will inherit the margin-left from its parent element
div { margin-left: inherit; }
Note
- The value in the CSS margin-left property can be expressed as either a fixed value or as a percentage.
- Negative values are allowed in the CSS margin-left property.
- When the value is provided as a percentage, it is relative to the width of the containing block.
- See also margin, margin-top, margin-bottom, and margin-right.
Browser Compatibility
The CSS margin-left property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the margin-left property below, exploring examples of how to use this property in CSS with a fixed value as well as a percentage value.
Using Fixed Value
Let's look at a CSS margin-left example where we have provided the value as a fixed value.
div { margin-left: 5px; }
In this CSS margin-left example, we have provided a value of 5px which would apply to the left side of the element.
Let's look at another CSS margin-left example with a fixed value.
div { margin-left: 5em; }
In this CSS margin-left example, we have provided a value of 5em which would apply to the left side of the element.
Using Percentage
Let's look at a CSS margin-left example where we have provided the value as a percentage.
div { margin-left: 4%; }
In this CSS margin-left example, we have provided a value of 4% which would apply to the left side of the element.
Using Auto
Let's look at an example where we have provided the value as auto.
div { margin-left: auto; }
In this example, we have set the left margin to auto for the <div> tag. The auto value is generally used to center blocks.
Advertisements