HTML DOM Style padding Property

HTMLWeb DevelopmentFront End Technology

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

Syntax

Following is the syntax −

  • Returning padding

object.style.padding
  • Modifying padding

object.style.padding = “value

Example

Let us see an example of HTML DOM style padding 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 padding 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.padding = "10px 30px";
   }
</script>
</body>
</html>

Output

This will produce the following output −

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

raja
Published on 22-Jul-2019 14:04:23
Advertisements