HTML | DOM Style padding Property

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"

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>       

chevron_right


Output:

  • Before clicking the button:

  • After clicking the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>         

chevron_right


Output:

  • Before clicking the button:

  • After clicking the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>     

chevron_right


Output: