Teach with us

HTML DOM Style paddingLeft Property

HTMLWeb DevelopmentFront 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.

raja
AmitDiwan
Updated on 01-Jul-2020 11:42:46

Previous Page Print Page Next Page  
Advertisements