Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
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
761 Views
