CSS margin-left Property
CSS margin-left property sets the left side margin to HTML Element(s).
The syntax to specify a value for margin-left property is
margin-left: value;
The following table gives the possible values that could be given to margin-left property.
Value | Description | Examples |
---|---|---|
length | Any valid CSS length unit. Refer CSS Length Units tutorial. | margin-left: 10px;margin-left: 5pt;margin-left: 2cm; |
Percentage Value | Left margin in percent of the width of the containing element. | margin-left: 20%; |
initial | Sets margin-left to default value. | margin-left: initial; |
inherit | Inherits margin-left value from its parent element. | margin-left: inherit; |
Examples
In the following examples, we set left margin to HTML Element(s) with a few allowed values for margin-left CSS property.
Simple Example
The following is a simple example, where we set margin-left for paragraph with 50px.
index.html
Different Values for margin-left
The following is a simple example, where we set different margin-left values for paragraphs.
index.html
margin-left property with CSS Length Units
In the following example, we apply margin-left property to paragraphs with a few different CSS Length Unit values.
index.html
margin-left property with Percentage Values
In the following example, we apply margin-left property to paragraphs with a few different percentage values.
If margin-left is specified in percentage values, and if width of the HTML element changes, then the margin also changes. For example, try to resize the browser window, and observe the left margin for these HTML Elements.
index.html
margin-left property for a few HTML elements
In the following example, we take a few HTML elements like h1, p, a, and pre, and set margin-left for these.
index.html
Conclusion
In this CSS Tutorial, we learned about margin-left property, and how to use this property for HTML Elements, with examples.