- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the right padding of an element with JavaScript?
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>
These are 2 ways we can add padding to set the right padding of an element in JavaScript
- Related Articles
- How to set the padding of an element with JavaScript?
- How to set the bottom padding of an element with JavaScript?
- How to set the left padding of an element with JavaScript?
- How to set the top padding of an element with JavaScript?
- How to set the right margin of an element with JavaScript?
- Specify the right padding of an element with CSS
- Set the left, right, top and bottom padding of an element
- How to set the right position of a positioned element with JavaScript?
- How to set the height of an element with JavaScript?
- How to set the margins of an element with JavaScript?
- Set the right margin of an element with CSS
- How to set the top position of an element with JavaScript?
- How to set the left margin of an element with JavaScript?
- How to set the horizontal alignment of an element with JavaScript?
- How to set the maximum height of an element with JavaScript?
