- 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
HTML DOM Style padding Property
The HTML DOM style padding property returns and modify the padding of an element in an HTML document.
Syntax
Following is the syntax −
Returning padding
object.style.padding
Modifying padding
object.style.padding = “value
Example
Let us see an example of HTML DOM style padding property −
<!DOCTYPE html> <html> <head> <style> body { color: #000; background: lightblue; height: 100vh; } p { border: 2px solid #fff; } .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; } </style> </head> <body> <h1>DOM Style padding Property Example</h1> <p> Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text. </p> <button onclick="add()" class="btn">Add padding</button> <script> function add() { document.querySelector('p').style.padding = "10px 30px"; } </script> </body> </html>
Output
This will produce the following output −
Click on “Add padding” button to add padding to the paragraph element −
Advertisements