HTML | DOM Style paddingLeft Property

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 string value which represents 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>