HTML - DOM Style Object paddingTop Property

Quiz

HTML DOM Style Object paddingTop property sets or returns the top padding of an element.

Syntax

Set the paddingTop property:

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

Get the paddingTop property:

object.style.paddingTop;

Property Values

Value	Description
percentage	It specifies the top padding in percentage value of the width of the parent element.
length	It specifies top 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 top padding of an element.

Examples of HTML DOM Style Object 'paddingTop' Property

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

Set Top Padding Value for div Element

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

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object paddingTop Property
    </title>
    <style>
        #padding {
            border: 2px solid #04af2f;
        }
    </style>
</head>
<body>
    <p>Click to add top padding.</p>
    <button onclick="fun()">top Padding</button>
    <button onclick="funTwo()">top 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.paddingTop = "20px";
        }
        function funTwo() {
            document.getElementById("padding")
                .style.paddingTop = "8%";
        }
    </script>
</body>
</html>

Get Top Padding Value of div Element

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

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object paddingTop Property
    </title>
    <style>
        #padding {
            border: 2px solid #04af2f;
        }
    </style>
</head>
<body>
    <p>Click to get top padding.</p>
    <button onclick="fun()">top Padding</button>
    <button onclick="funTwo()">top 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.paddingTop = "20px";
            document.getElementById("result")
                .innerHTML="top Padding value :" +x;
        }
        function funTwo() {
            let x=document.getElementById("padding")
                .style.paddingTop = "8%";
            document.getElementById("result")
                .innerHTML="top Padding value :" +x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
paddingTop	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page