Teach with us

HTML DOM Style margin Property

HTMLWeb DevelopmentFront End Technology

The DOM style margin property returns and modify the margin of an element in an HTML document.

Syntax

Following is the syntax −

  • Returning margin

object.style.margin

  • Modifying margin

object.style.margin = “value”

Example

Let us see an example of style margin property −

 Live Demo

<!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 margin 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.margin = "20px 30px";
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Add margin” button to add margin to paragraph element −

raja
AmitDiwan
Updated on 01-Jul-2020 11:06:54

Previous Page Print Page Next Page  
Advertisements