JavaScript – Change the Padding of HTML Element

To change the padding of a HTML Element using JavaScript, get reference to this HTML Element, and assign required padding value to the property.

In the following example, we will change the padding of HTML Element with id "myElement" to "20px", in JavaScript, using property.


<!DOCTYPE html>
<html lang="en">
        #myElement {
            border:1px solid #CCC;
    <meta charset="utf-8">
    <h2>Change Padding of HTML Element using JavaScript</h2>
    <div id="myElement">Hello World!</div>
    <button type="button" onclick="changeStyle()">Click Me</button>
    function changeStyle(){
        var element = document.getElementById("myElement"); = "20px";
Try Online


In this JavaScript Tutorial, we learned how to change the padding of a HTML Element using JavaScript.