The margin-left property in CSS is used to set the width of the margin on the left of the desired element. Negative values of this property are allowed.
- A positive value is used when it is desired that the margin is farther away from its neighbors.
- A negative value is used when it is desired that the margin is placed closer.
Syntax:
margin-left: length|auto|initial|inherit;
Default Value : Its default value is 0.
Property values:
- length : Sets a fixed value defined in px, cm, pt. Negative values as mentioned earlier are allowed. 0 px is the default value.
margin-left: 15px;
- Example 1:
html
<html>
<head>
<title>
CSS | margin-left Property
</title>
</head>
<body>
<p style = "margin-left:15px; border-style:solid ;
border-color:black;">
This paragraph has 15px margin .
</p>
</body>
</html>
|
- Example 2:
html
<html>
<head>
<title>
CSS | margin-left Property
</title>
</head>
<body>
<p style = "margin-left:20%; border-style:solid ;
border-color:black;">
This paragraph has 20% margin .
</p>
</body>
</html>
|
- auto :It is used when it is desired that the browser determines the width of the left margin.
margin-left: auto;
- Example:
html
<html>
<head>
<title>
CSS | margin-left Property
</title>
</head>
<body>
<p style = "margin-left:auto; border-style:solid ;
border-color:black;">
This paragraph has auto margin .
</p>
</body>
</html>
|
- initial :It is used to set the value of the margin-left property to its default value.
margin-left: initial;
- Example:
html
<html>
<head>
<title>
CSS | margin-left Property
</title>
</head>
<body>
<p style = "margin-left:initial; border-style:solid ;
border-color:black;">
This paragraph has initial margin .
</p>
</body>
</html>
|
- inherit :It is used when it is desired that the element inherit the margin-left property of its parent as its own.
margin-left: inherit;
- Example 1:
html
<html>
<head>
<title>
CSS | margin-left Property
</title>
</head>
<body>
<div style="margin-left:50px;">
<p style = "margin-left:inherit; border-style:solid ;
border-color:black;">
This paragraph has auto margin .
</p>
</div>
</body>
</html>
|
- Example 2:
html
<html>
<head>
<title>
CSS | margin-left Property
</title>
</head>
<body>
<p style = "margin-left:auto; border-style:solid ;
border-color:black;">
This paragraph has auto margin .
</p>
<p style = "margin-left:10px; border-style:solid ;
border-color:black;">
This paragraph has 10px margin.
</p>
<br>
<p style = "margin-left:5%;border-style:solid;
border-color: black;">
This paragraph has 5% margin.
</p>
<br>
<p style = "margin-left:15px; border-style:solid;
border-color: black;">
This text has an margin of 15px.
</p>
<br><br>
<p style = "margin-left:initial;border-style:solid;
border-color: black;">
This text has a margin of default
typeset by initial
</p>
</body>
</html>
|
Supported Browsers: The browser supported by margin-left Property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 3.0
- Opera 3.5
- Firefox 1.0
- Safari 1.0