Open In App
Related Articles

HTML DOM Style paddingLeft Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The Style paddingLeft property in HTML DOM is used to set or return the left padding of the 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 that represents the left padding of an element.

Example 1: This example changes the paddingLeft property of an element.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML DOM Style paddingLeft Property</title>
     
    <style>
        body {
            text-align: center;
        }
 
        #textContent {
            border: 1px solid black;
            width: 300px;
            margin: auto;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h2>HTML DOM Style paddingLeft Property</h2>
     
    <p id="textContent">
        A computer science portal for geeks
    </p>
    <br>
 
    <button onClick="myGeeks()">
        Change Left Padding
    </button>
 
    <script>
        function myGeeks() {
 
            // Set padding left using
            // length unit.
            document.getElementById("textContent")
                .style.paddingLeft = "50px";
        }
    </script>
</body>
 
</html>

                    

Output:

paddingLeft

Example 2: This example changes the paddingLeft property of an element.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML DOM Style paddingLeft Property</title>
     
    <style>
        body {
            text-align: center;
        }
 
        #textContent {
            border: 1px solid black;
            width: 300px;
            margin: auto;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h2>HTML DOM Style paddingLeft Property</h2>
     
    <p id="textContent">
        A computer science portal for geeks
    </p>
    <br>
 
    <button onClick="myGeeks()">
        Change Left Padding
    </button>
 
    <script>
        function myGeeks() {
 
            // Set padding left using
            // length unit.
            document.getElementById("textContent")
                .style.paddingLeft = "10%";
        }
    </script>
</body>
 
</html>

                    

Output:

paddingLeft-2

Supported Browsers:

  • Chrome 1
  • Edge 12
  • Firefox 1
  • Safari 1
  • Opera 3.5


Last Updated : 29 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads