HTML | DOM Style padding Property

Last Updated : 05 Jun, 2022

The Style padding property is used for setting or returning the padding of an element. The Style padding property can be used in 4 different ways :

div {padding: 30px} -In this case, all the four sides have a padding of 30px.
div {padding: 100px 50px} -In this case, the top and bottom padding will be 100px, left and right padding will be 50px.
div {padding: 10px 20px 50px} -In this case, the top padding will be 10px, left and right padding will be 20px, bottom padding will be 50px.
div {padding: 100px 10px 20px 40px} -In this case, the top padding will be 100px, right padding will be 10px, bottom padding will be 20px, left padding will be 40px.

Syntax:

To get the property value:

object.style.padding

To set the property value:

object.style.padding = "%|length|initial|inherit"

Return Values: It returns a string value, which represents the padding of an element.

Property values:

% : It is used to define the padding in % of the width of the parent element.
length : It is used to define the padding in length units.
initial : It is used to set this property to its default value.
inherit : It is used to inherit this property from its parent element.

Below program illustrates the Style padding property :

Example 1: Setting the padding{30px} for a <div> element:

html

<!DOCTYPE html>
<html>

<head>
    <title>Style padding Property in HTML</title>
    <style>
        #samplediv {
            border: 1px solid green;
        }
        
        h1 {
            color: green;
        }
        
        h2 {
            font-family: Impact;
        }
        
        body {
            text-align: center;
        }
    </style>
</head>

<body>

    <h1>GeeksforGeeks</h1>
    <h2>Style padding Property</h2>
    <br>

    <div id="samplediv">Geeksforgeeks</div>

    <p>For setting the padding, 
      double click the "Set Padding" button: </p>
    <br>

    <button ondblclick="padding()">
        Set Padding
    </button>

    <script>
        function padding() {
            document.getElementById("samplediv")
                .style.padding = "30px";
        }
    </script>

</body>

</html>

Output:

Before clicking the button:
After clicking the button:

Example 2: Setting the padding{100px 50px} for a <div> element:

html

<!DOCTYPE html>
<html>

<head>
    <title>Style padding Property in HTML</title>
    <style>
        #samplediv {
            border: 1px solid green;
        }
        
        h1 {
            color: green;
        }
        
        h2 {
            font-family: Impact;
        }
        
        body {
            text-align: center;
        }
    </style>
</head>

<body>

    <h1>GeeksforGeeks</h1>
    <h2>Style padding Property</h2>
    <br>

    <div id="samplediv">Geeksforgeeks</div>

    <p>For setting the padding, 
      double click the "Set Padding" button: </p>
    <br>

    <button ondblclick="padding()">Set Padding </button>

    <script>
        function padding() {
            document.getElementById("samplediv")
                .style.padding = "100px 50px";
        }
    </script>

</body>

</html>

Output:

Before clicking the button:
After clicking the button:

Example 3: Setting the padding{10px 20px 50px} for a <div> element:

html

<!DOCTYPE html>
<html>

<head>
    <title>Style padding Property in HTML</title>
    <style>
        #samplediv {
            border: 1px solid green;
        }
        
        h1 {
            color: green;
        }
        
        h2 {
            font-family: Impact;
        }
        
        body {
            text-align: center;
        }
    </style>
</head>

<body>

    <h1>GeeksforGeeks</h1>
    <h2>Style padding Property</h2>
    <br>

    <div id="samplediv">Geeksforgeeks</div>

    <p>For setting the padding, 
      double click the "Set Padding" button: </p>
    <br>

    <button ondblclick="padding()">
        Set Padding
    </button>

    <script>
        function padding() {
            document.getElementById("samplediv")
                .style.padding = "10px 20px 50px";
        }
    </script>

</body>

</html>

Output:

Before clicking the button:
After clicking the button: Example 4: Setting the padding{ 100px 10px 20px 40px} for a <div> element:

html

<!DOCTYPE html>
<html>

<head>
    <title>Style padding Property in HTML</title>
    <style>
        #samplediv {
            border: 1px solid green;
        }
        
        h1 {
            color: green;
        }
        
        h2 {
            font-family: Impact;
        }
        
        body {
            text-align: center;
        }
    </style>
</head>

<body>

    <h1>GeeksforGeeks</h1>
    <h2>Style padding Property</h2>
    <br>

    <div id="samplediv">Geeksforgeeks</div>

    <p>For setting the padding, 
      double click the "Set Padding" button: </p>
    <br>

    <button ondblclick="padding()">
        Set Padding
    </button>

    <script>
        function padding() {
            document.getElementById("samplediv")
                .style.padding = "100px 10px 20px 40px";
        }
    </script>

</body>

</html>