Skip to content
Related Articles

Related Articles

HTML | DOM Style padding Property

View Discussion
Improve Article
Save Article
  • 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>       

  • 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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!