HTML - DOM Style Object paddingRight Property

Quiz

HTML DOM Style Object paddingRight property sets or returns the right padding of an element.

Syntax

Set the paddingRight property:

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

Get the paddingRight property:

object.style.paddingRight;

Property Values

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

Examples of HTML DOM Style Object 'paddingRight' Property

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

Set Right Padding Value for div Element

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

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

Get Right Padding Value of div Element

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

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

Supported Browsers

Property
paddingRight	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page