Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style padding Property

  • Last Updated : 02 Aug, 2019

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:






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




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




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




    <!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: The browser supported by HTML | DOM Style padding Property are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Apple Safari

    Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
Recommended Articles
Page :