The padding of an element specifies the space around the content inside the defined borders. It adds an extra number of pixels around the four sides. It basically allows the reshaping of an element that represents the content more clearly. It does not set to any element by default. However, the user can set, and modify it as per the requirements.

This guide explains how to adjust the padding of an element using JavaScript.

How to Adjust the Padding of an Element Using JavaScript?

The JavaScript “padding” property helps to adjust the padding of an element in “pixels”. This property supports a maximum of four values i.e., “left”, “right”, “top”, and “bottom” of an element in this way:

• One value (30px): It sets the specified value as a top, right, bottom, and left padding of an element.
• Two values (20px, 30px): It sets the padding to the top as well as the bottom of an element.
• Three values (10px, 20px, 30px): It sets the first value as the top padding, the second as the right and left, and the third one as the bottom padding of an element.
• Four values (10px, 20px, 30px, 40px): It sets “10 (top)”, “20 (right)”, “30 (bottom)”, and “40(left)” padding of an element.

Syntax

The above syntax works on four values that are listed below:

• %: It specifies the width percentage of the parent element.
• length: It defines the padding in length units.
• initial: It sets the property to the default value.
• inherit: It inherits the parent element’s padding.

Let’s use the above-defined property practically.

Example 1: Adjusting the Padding of an Element

This example applies the “padding” property to adjust the padding of the target “<div>” element.

HTML Code

First, have a look at the stated HTML code:

In the above code lines:

• A “<div>” element is created with an id “Div1”, and is styled using the stated styling attribute i.e., “border”.
• Inside this “div”, the “<p>” tags add a paragraph statement.
• Lastly, the “<button>” tag adds a new button to execute the functionality of the “jsFunc()” function when the associated “onclick” event is fired.

JavaScript Code

Now, move on to the JavaScript code:

In the above code snippet:

• Define a function named “jsFunc()”.
• In its definition, the “getElementById()” method accesses the added “<div>” element using its id “Div1” and then applies the specified “padding” property values on it.

Output

Here, the given button sets the specified padding at the top, right, bottom, as well as the left sides of the given “<div>” element.

Example 2: Modifying the Padding of an Element

This example applies the “padding” property to modify the existing padding of an element with the new ones.

HTML Code

Follow the given HTML code:

The above code block is the same as the “Example 1”, but at this time the “<div>” element is styled using the specified padding attribute values.

JavaScript Code

Next, consider the JavaScript code:

Here, a single padding value is assigned to all the dimensions, thereby modifying the existing padding values of the target “<div>” element.

Output

As seen in the above output, the assigned padding property value is assigned to all the top, right, bottom, and left dimensions of the “<div>” element accordingly.

Example 3: Returning the Padding of an Element

Once the padding of an element is set, it can also be retrieved with the help of the discussed “padding” property.

HTML Code

Look at the given HTML code:

This code is the same as the HTML code of “Example 2”.

JavaScript Code

Now, go through the given code:

Here, an “alert box” is created to display the “padding” attribute value of the accessed “<div>” element using the “padding” property.

Output

The outcome pops up an alert box containing the padding attribute values of the “div” on the button click.

Conclusion

To adjust the padding of an element, use the JavaScript predefined “padding” property. This property helps to set and retrieve the padding of the target HTML element(s). The padding of an element adjusts the content at a specific number of pixels. Once the property value is set, the user can also modify it. This guide briefly explained how to adjust the padding of an element using JavaScript.