Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style paddingLeft Property

  • Last Updated : 28 Jan, 2019

paddingLeft : It is used to modify or get the left padding of an element.

  • Difference with marginLeft:
    Both the marginLeft property and the paddingLeft property insert left space to an element. However, the difference is that marginLeft inserts the space around the border, while paddingLeft inserts the space within the border to the left of an element.

Syntax:

  • It returns the paddingLeft property.
    object.style.paddingLeft
  • It sets the paddingLeft Property.
    object.style.paddingLeft = "%|length|initial|inherit"

Return value:It returns the left padding of an element.

Example-1:




<!DOCTYPE html>
<html>
  
<head>
    <title>DOM Style paddingLeft Property </title>
    <style>
        #Geek_1 {
            color: green;
            width: 50%;
        }
          
        #Geek_Center {
            width: 400px;
            background: yellow;
        }
    </style>
</head>
  
<body bgcolor="green">
    <center id="Geek_Center">
        <h1 id="Geek_1"
                GeeksForGeeks 
            </h1>
  
        <h2>DOM Style paddingLeft Property </h2>
        <br>
        
        <button type="button" onclick="geeks()">
            Click to change
        </button>
  
        <script>
            function geeks() {
                
                //  Set padding left using 
                //  length unit.
                document.getElementById(
                  "Geek_Center").style.paddingLeft =
                  "50px";
            }
        </script>
    </center>
</body>
  
</html>

Output:



Before click on button:

After click on the button:

Example-2:




<!DOCTYPE html>
<html>
  
<head>
    <title>DOM Style paddingLeft Property </title>
    <style>
        #Geek_1 {
            color: green;
            width: 50%;
        }
          
        #Geek_Center {
            width: 400px;
            background: yellow;
        }
    </style>
</head>
  
<body bgcolor="green">
    <center id="Geek_Center">
        <h1 id="Geek_1"
                GeeksForGeeks 
            </h1>
  
        <h2>DOM Style paddingLeft Property </h2>
        <br>
        <button type="button" onclick="geeks()">
            Click to change
        </button>
  
        <script>
            function geeks() {
                
                //  Set 'left padding'
                //  using %.
                document.getElementById(
                  "Geek_Center").style.paddingLeft =
                  "20%";
            }
        </script>
    </center>
</body>
  
</html>

Output:

Before click on button:

After click on button:

Supported Browsers: The browser supported by DOM Style paddingLeft property are listed below:

  • Google Chrome
  • Internet Explorer
  • Mozilla firefox
  • Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :