HTML DOM Style marginRight Property

HTML Web Development Front End Technology

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

Syntax

Following is the syntax −

Returning marginRight

object.style.marginRight

Modifying marginRight

object.style.marginRight = “value”

Example

Let us see an example of style marginRight 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 marginRight 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.marginRight = "50px";
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Add margin” button to add right margin to paragraph element.

AmitDiwan

Published on 22-Jul-2019 13:56:07

Previous Page Print Page