HTML - DOM Style Object paddingLeft Property

Quiz

HTML DOM Style Object paddingLeft property sets or returns the left padding of an element.

Syntax

Set the paddingLeft property:

object.style.paddingLeft= "percentage | length | initial | inherit";

Get the paddingLeft property:

object.style.paddingLeft;

Property Values

Value	Description
percentage	It specifies the left padding in percentage value of the width of the parent element.
length	It specifies left padding in length units.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents the left padding of an element.

Examples of HTML DOM Style Object 'paddingLeft' Property

The following example sets and gets the left padding values of div element.

Set Left Padding Value for div Element

The following example sets the left padding value of div element using length and percentage value.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object paddingLeft Property
    </title>
    <style>
        #padding {
            border: 2px solid #04af2f;
        }
    </style>
</head>
<body>
    <p>Click to add left padding.</p>
    <button onclick="fun()">left Padding</button>
    <button onclick="funTwo()">left Padding in %</button>
    <br><br><br>
    <p id="result"></p>
    <div id="padding">
        Welcome to Tutorials Point...
    </div>    
    <script>
        function fun() {
            document.getElementById("padding")
                .style.paddingLeft = "20px";
        }
        function funTwo() {
            document.getElementById("padding")
                .style.paddingLeft = "8%";
        }
    </script>
</body>
</html>

Get Left Padding Value of div Element

The following example gets the left padding value of div element.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object paddingLeft Property
    </title>
    <style>
        #padding {
            border: 2px solid #04af2f;
        }
    </style>
</head>
<body>
    <p>Click to get left padding.</p>
    <button onclick="fun()">left Padding</button>
    <button onclick="funTwo()">left Padding in %</button>
    <br><br><br>
    <p id="result"></p>
    <div id="padding">
        Welcome to Tutorials Point...
    </div>    
    <script>
        function fun() {
            let x=document.getElementById("padding")
                .style.paddingLeft = "20px";
            document.getElementById("result")
                .innerHTML="left Padding value :" +x;
        }
        function funTwo() {
            let x=document.getElementById("padding")
                .style.paddingLeft = "8%";
            document.getElementById("result")
                .innerHTML="left Padding value :" +x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
paddingLeft	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page