Skip to content
Related Articles

Related Articles

CSS | margin-left Property
  • Last Updated : 09 Aug, 2019

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;

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>
       <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>
       <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>
       <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>
       <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>
       <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>
       <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
  • Internet Explorer 6.0
  • Opera 3.5
  • Firefox1.0
  • Safari 1.0
My Personal Notes arrow_drop_up
Recommended Articles
Page :