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