HTML DOM Style marginBottom Property

HTMLWeb DevelopmentFront End Technology

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

Syntax

Following is the syntax −

  • Returning marginBottom

object.style.marginBottom
  • Modifying marginBottom

object.style.marginBottom = “value”

Example

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

Output

This will produce the following output −

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

raja
Published on 22-Jul-2019 13:38:43
Advertisements