CSS margin-left Property

Last Updated : 27 Aug, 2024

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

CSS margin-right Property

EnaMotwani

Improve

Article Tags :

CSS margin-left Property

Similar Reads

Thank You!

What kind of Experience do you want to share?