- Trending Categories
- 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 marginTop Property
The DOM style marginTop property returns and modify the top margin of an element in an HTML document.
Syntax
Following is the syntax −
Returning marginTop
object.style.marginTop
Modifying marginTop
object.style.marginTop = “value”
Example
Let us see an example of style marginTop 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 marginTop 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 margin</button> <script> function add() { document.querySelector('p').style.marginTop = "50px"; } </script> </body> </html>
Output
This will produce the following output −
Click on “Add margin” button to add top margin to paragraph element.
Advertisements