HTML - DOM Style Object paddingBottom Property

Quiz

HTML DOM Style Object paddingBottom property sets or returns the bottom padding of an element.

Syntax

Set the paddingBottom property:

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

Get the paddingBottom property:

object.style.paddingBottom;

Property Values

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

Examples of HTML DOM Style Object 'paddingBottom' Property

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

Set Bottom Padding Value for div Element

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

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

Get Bottom Padding Value of div Element

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

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

Supported Browsers

Property
paddingBottom	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page