Open In App

HTML | DOM Style padding Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>       


  • Output:
    • Before clicking the button:
    • After clicking the button:

Supported Browsers:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 4 and above
  • Firefox 1 and above
  • Opera 3.5 and above
  • Apple Safari 1 and above


Last Updated : 05 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads