Article Categories

Selected Reading

How to set the left padding of an element with JavaScript?

Javascript Object Oriented Programming Front End Technology

Use the paddingLeft property in JavaScript to set the left padding of an element. This property allows you to dynamically modify the spacing between an element's content and its left border.

Syntax

element.style.paddingLeft = "value";

The value can be specified in pixels (px), percentages (%), em units, or other CSS length units.

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 2px solid #FF0000;
            width: 150px;
            height: 70px;
            background-color: #f0f0f0;
         }
      </style>
   </head>

   <body>
      <div id="box">This is demo text.</div>
      <br><br>
      <button type="button" onclick="setPadding()">Set Left Padding</button>
      <button type="button" onclick="resetPadding()">Reset Padding</button>
      
      <script>
         function setPadding() {
            document.getElementById("box").style.paddingLeft = "50px";
         }
         
         function resetPadding() {
            document.getElementById("box").style.paddingLeft = "0px";
         }
      </script>
   </body>
</html>

Getting Current Left Padding

You can also retrieve the current left padding value using the same property:

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            border: 1px solid #333;
            padding-left: 25px;
            width: 200px;
            height: 50px;
         }
      </style>
   </head>

   <body>
      <div id="demo">Sample content</div>
      <br>
      <button onclick="showPadding()">Show Left Padding</button>
      <p id="result"></p>
      
      <script>
         function showPadding() {
            var element = document.getElementById("demo");
            var padding = element.style.paddingLeft || getComputedStyle(element).paddingLeft;
            document.getElementById("result").innerHTML = "Left padding: " + padding;
         }
      </script>
   </body>
</html>

Different Units

You can set left padding using various CSS units:

<!DOCTYPE html>
<html>
   <head>
      <style>
         .test-box {
            border: 1px solid #000;
            width: 150px;
            height: 40px;
            margin: 10px 0;
            background-color: #e6f3ff;
         }
      </style>
   </head>

   <body>
      <div class="test-box" id="box1">Box 1</div>
      <div class="test-box" id="box2">Box 2</div>
      <div class="test-box" id="box3">Box 3</div>
      
      <button onclick="setPaddingUnits()">Set Different Units</button>
      
      <script>
         function setPaddingUnits() {
            document.getElementById("box1").style.paddingLeft = "30px";    // pixels
            document.getElementById("box2").style.paddingLeft = "2em";     // em units
            document.getElementById("box3").style.paddingLeft = "10%";     // percentage
         }
      </script>
   </body>
</html>

Key Points

Use element.style.paddingLeft to set left padding dynamically
Values can be in pixels, percentages, em, rem, or other CSS units
Always include the unit (e.g., "50px", not just "50")
Use getComputedStyle() to get computed padding values from CSS

Conclusion

The paddingLeft property provides an easy way to dynamically adjust left padding using JavaScript. Remember to specify units and use getComputedStyle() when retrieving CSS-defined values.

Anvi Jain

Updated on: 2026-03-15T23:18:59+05:30

758 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next