HTML - DOM Style Object padding Property

Quiz

HTML DOM Style Object padding property sets or returns the padding of an element. Padding refers to space between content and its border.

It accepts upto four values

One Value: For one value, same padding value applies to all four sides. For example: div {padding: 20px}.
Two Value:For two values, top and bottom padding will be same , left and right padding will be same. For example: div {padding: 20px 40px}.
Three Value:For three values, top and bottom padding will be of different size whereas left and right paddings will be of same size. For example: div {padding: 20px 40px 60px}.
Four Value:For four values, all padding will have of different size. For example: div {padding: 20px 40px 60px 10%}.

Syntax

Set the padding property:

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

Get the padding property:

object.style.padding;

Property Values

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

Examples of HTML DOM Style Object 'padding' Property

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

Set Padding Value for div Element

The following example sets the padding value of div element using length and percentage value and different values for each side.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object padding Property
    </title>
    <style>
        #padding {
            border: 2px solid #04af2f;
        }
    </style>
</head>
<body>
    <p>Click to add padding on different sides.</p>
    <button onclick="fun()">Add Padding</button>
    <button onclick="funTwo()">Two Values</button>
    <button onclick="funThree()">Three Values</button>
    <button onclick="funFour()">Four values</button>
    <br><br><br>
    <div id="padding">
        Welcome to Tutorials Point...
    </div>
    <script>
        function fun() {
            document.getElementById("padding")
                .style.padding = "10px";
        }
        function funTwo() {
            document.getElementById("padding")
                .style.padding = "15px 20px";
        }
        function funThree() {
            document.getElementById("padding")
                .style.padding = "5% 10% 15%";
        }
        function funFour() {
            document.getElementById("padding")
                .style.padding = "10px 30px 20px 40px";
        }
    </script>
</body>
</html>

Get Padding Value of div Element

The following example gets the padding value of div element.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object padding Property
    </title>
    <style>
        #padding {
            border: 2px solid #04af2f;
        }
    </style>
</head>
<body>
    <p>Click to add padding on different sides.</p>
    <button onclick="fun()">Add Padding</button>
    <button onclick="funTwo()">Two Values</button>
    <button onclick="funThree()">Three Values</button>
    <button onclick="funFour()">Four values</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.padding = "10px";
            document.getElementById("result")
                .innerHTML="Padding value :" +x;
        }
        function funTwo() {
            let x=document.getElementById("padding")
                .style.padding = "15px 20px";
            document.getElementById("result")
                .innerHTML="Padding value :" +x;
        }
        function funThree() {
            let x=document.getElementById("padding")
                .style.padding = "5% 10% 15%";
            document.getElementById("result")
                .innerHTML="Padding value :" +x;
        }
        function funFour() {
            let x=document.getElementById("padding")
                .style.padding = "10px 30px 20px 40px";
            document.getElementById("result")
                .innerHTML="Padding value :" +x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
padding	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page