HTML DOM Style paddingRight Property

The HTML DOM Style paddingRight property return and add right padding to an HTML element.


Following is the syntax −

1. Returning paddingRight

2. Adding paddingRight”value”

Here, “value” can be the following −

lengthIt defines value padding in length unit.
initialIt defines padding to its default value.
inheritIn this padding gets inherited from its parent element.
percentage(%)It defines padding in percentage of the width of the parent element.

Let us see an example of HTML DOM Style paddingRight property−


 Live Demo

<!DOCTYPE html>
   .outer-box {
      background-color: #db133a;
      width: 300px;
      height: 300px;
      margin: 1rem auto;
   .inner-box {
      background-color: #C3C3E6;
      width: 100%;
      height: 150px;
<h1>HTML DOM Style paddingRight Property Demo</h1>
<div class="outer-box">
<div class="inner-box">
<button type="button" onClick='addPadding()'>Add Padding</button>
   function addPadding() {
      var outerBox = document.querySelector('.outer-box') = '20px';


Click on “Add Padding” button to add padding inside red box.

Updated on: 27-Sep-2019


Kickstart Your Career

Get certified by completing the course

Get Started