How to set the padding of an element with JavaScript?

Javascript Object Oriented Programming Front End Technology

In this tutorial, we will look at the methods to set the padding of an element with JavaScript.

All of us know that there are margins and padding available in JavaScript. Then, what exactly is the padding of an element?

Padding can be termed as the space between an element's content and its border, whereas margin adds space around the edge.

Use the padding property in JavaScript to set the padding of an element

Let us check out the method to set the padding.

Using the Style padding Property

In this section, let us discuss the padding property. We can specify padding in pixels(px), points(pt), percentage(%), centimeters (cm), etc. Padding property works as follows.

padding: 10px; Sets 10px padding to the top, right, bottom, and left of the element.

padding: 10px 20px; Sets 10px padding to the top and bottom of the element. Sets 20px padding to the right and left of the element.

padding: 10px 20px 30px; Sets 10px padding on top of the element. Sets 20px padding to the right and left of the element. Sets 30px padding to the bottom of the element.

padding: 10px 20px 30px 40px; Sets 10px to top, 20px to right, 30px to bottom, and 40px to the left of the element.

Syntax

Following is the syntax to set the padding of an element using the padding property in JavaScript −

object.style.padding = "%|length|initial|inherit|revert|revert-layer|unset"

The syntax above sets the padding value to the element's style attribute. The padding value is 0 by default. The return term is a string that represents the padding value.

Parameters

% − Padding in the percentage of the parent element's width.
length − Padding value. It must be a positive value. Does not work on table-rowgroup, table-header-group, table-footer-group, table-row, table-column-group, and table-column. Works on ::first-letter and ::first-line.
initial − Default value.
inherit − Takes the property value from the parent element

Example 1

This program has a div tag for which we will set the padding. When the user press the button, we call the function to set the padding using the syntax given above.


<html>
<head>
<style>
   #padEl{
      border: 5px solid #000000;
      background-color: #9400D3;
      color: #FFFFFF;
   }
</style>
</head>
<body>
   <p> Setting the padding of an element using <i>the padding
   </i>property</p>
   <div id = "padBtnWrap">
      <p> Click the "Set it" button </p>
      <button onclick="setPadding()"> Set it </button>
   </div>
   <br><br>
   <div id = "padEl">Hello, set padding for me.</div>
   <script>
      function setPadding(){ 
         var padEle=document.getElementById("padEl");
         var padBtEle=document.getElementById("padBtnWrap");
         padEle.style.padding="10px 20px 30px 40px";
         padEle.innerHTML="Padding set as 10px 20px 30px 40px.";
         padBtEle.style.display="none";
      }
   </script>
</body>
</html>

Example 2

In this program, we have a div element whose padding value is set already. When the user clicks on the button, we call the function to display the padding using the syntax above.


<html>
<head>
<style> 
   #padEl{
      border: 10px solid #696969;
      background-color: #556B2F;
      color: #FFFFFF;
      font-weight: bold;
   }
</style>
</head>
<body>
   <h4> Get the padding of an element using the<i> padding</i>property</h4>
   <div id="padBtnWrap"
      <p> Click the "Get it" button </p>
      <button onclick="getPadding()">Get it</button>
   </div>
   <br><br>
   <div id="padEl" style="padding: 40px 30px 20px 10px;"> Hello, get
   padding for me. </div>
   <br><br>
   <div id="padOp"></div>
   <script>
      function getPadding(){
         var padVal=document.getElementById("padEl").style.padding;
         document.getElementById("padOp").innerHTML="The padding is=" + padVal;
         document.getElementById("padBtnWrap").style.display="none";
      }
   </script>
</body>
</html>

Example 3

In this example, we are getting the padding value and padding option from the user. When the user provides the required input and clicks on the button, we call the function to set the user-specified padding value to the element.


<html>
<head>
<style>
   #padUsrEl{
      border: 10px solid #8A2BE2;
      background-color: #5F9EA0;
   }
   #padUsrErr{
      color: red;
      font-weight:bold;
      display: none;
   }
</style>
</head>
<body>
   <h4>
      Set user-specified padding of an element using the <i>padding</i> property
   </h4>
   <div id = "padUsrBtnWrap"
      <p> Enter a padding value and click on the button </p>
      <input name="padUsrTxt" type="text" id="padUsrTxt" placeholder="Enter like 1px 1em 1% 1cm"/>
      <br><br>
      <button onclick="setUserPadding()"> Set it </button>
   </div>
   <br>
   <div id="padUsrErr"> Please provide input and click on the button </div>
   <br><br>
   <div id="padUsrEl"> I am a div element. </div>
   <br><br>
   <script>
      function setUserPadding() {
         var padVal;
         var padTxtVal=document.getElementById('padUsrTxt').value;
         if(padTxtVal=="")
            document.getElementById("padUsrErr").style.display="block";
         else{
            padVal=padTxtVal;
            document.getElementById("padUsrEl").style.padding=padVal;
            document.getElementById("padUsrEl").innerHTML="Padding set to " + padVal;
            document.getElementById("padUsrErr").style.display="none";
         }
      }
   </script>
</body>
</html>

In this tutorial, we have discussed the padding property to set the padding of an element in JavaScript.

The padding property is a built-in property in JavaScript and is very easy for the coders to use.

Shubham Vora

Updated on: 22-Nov-2022

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started