How to set the right padding of an element with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to set the right padding of an element with JavaScript.

First, let's try to understand what padding means; padding is simply an extra space between a page's border and our content. The gap between them increases as the value of padding increases. Padding is similar to the margin; padding is distinct from the margin because padding adds space between the border and content, whereas margin is used to add space around the edge.

While padding can be done on all sides, i.e., Top, Bottom, Left, and Right in the following lines, we will see how we will add padding to the right side of an element. This can be done using the object. style.paddingRight.

Using the Style paddingRight Property

The style paddingRight property determines how wide the right-hand padding region of an element is.

Syntax

object.style.paddingRight = value ;

Users can follow the above syntax for the right padding.

Parameters

Value – Numeric value in units (em, ex, %, px, cm, mm, in, pt, pc)

Example

In the below given example, we are creating a box with a certain height and width; we've added a background color to it so that we can see the change when the padding is added clearly. All the styling is stored under the Id "Rpad." Once we press the Enable right padding button, we can see the right padding of 70px as mentioned in the code. Observe how the space is added between the content and the border in the output.


<html>
<head>
<style>
   #Rpad {
      border: 1px solid black;
      background-color: #BBFA9F;
      width: 400px;
      height: 70px;
   }
</style>
</head>
<body>
   <div id = "rPad">
      This is a sample text with rPad as it's Id
   </div>
   <br><br>
   <script>
      function myFunction() {
         document.getElementById("rPad").style.paddingRight = "70px";
      }
   </script>
   <button onclick="myFunction()"> Enable Right padding </button>
</body>
</html>

The other way of doing it is by using object. style.padding

Using the Style padding Property

The Style padding property is similar to the style paddingRight property, but here there are more parameters to take into consideration.

Syntax

Object.style.padding="Top, Right, Bottom, Left";

Users can follow the above syntax for the right padding using another method.

Parameters

Top − Padding from the top value.
Right − Padding on to the right side.
Bottom − padding from the bottom.
Left − padding on the left side.

Example

In the below example, we have to mention all the parameters. In this case, I added padding only to the right side. We can see there is a rise in the gap between content and margin after pressing the buttons.


<html>
<head>
<style>
   #Pad {
      border: 1px solid black;
      background-color: #BBFA9F;
      width: 400px;
      height: 70px;
   }
</style>
</head>
<body>
   <div id="Pad">
      This is a sample text with Pad as its Id
   </div>
   <br>
   <script>
      function myFunction() {
         document.getElementById("Pad").style.padding = "0px 100px 0px 0px";
      }
   </script>
<button onclick="myFunction()"> Enable Right padding </button>
</body>
</html>