HTML DOM Style paddingBottom Property

HTMLWeb DevelopmentFront End Technology

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

Syntax

Following is the syntax −

  • Returning paddingBottom

object.style.paddingBottom
  • Modifying paddingBottom

object.style.paddingBottom = “value”

Example

Let us see an example of style paddingBottom 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 paddingBottom 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 padding</button>
<script>
   function add() {
      document.querySelector('p').style.paddingBottom = "30px";
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Add padding” button to add bottom padding to a paragraph element −

raja
Published on 22-Jul-2019 17:37:44
Advertisements