HTML DOM Style paddingLeft Property

HTML Web Development Front End Technology

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

Syntax

Following is the syntax −

Returning paddingLeft

object.style.paddingLeft

Modifying paddingLeft

object.style.paddingLeft = “value”

Example

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

Output

This will produce the following output −

Click on “Add padding” button to add left padding to paragraph element.

AmitDiwan

Published on 22-Jul-2019 14:11:38

Previous Page Print Page