The HTML DOM Style paddingRight property return and add right padding to an HTML element.
Syntax
Following is the syntax −
1. Returning paddingRight
object.style.paddingRight
2. Adding paddingRight
object.style.paddingRight=”value”
Here, “value” can be the following −
| Value | Details |
|---|---|
| length | It defines value padding in length unit. |
| initial | It defines padding to its default value. |
| inherit | In 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−
Example
<!DOCTYPE html>
<html>
<head>
<style>
.outer-box {
background-color: #db133a;
width: 300px;
height: 300px;
margin: 1rem auto;
}
.inner-box {
background-color: #C3C3E6;
width: 100%;
height: 150px;
}
</style>
</head>
<body>
<h1>HTML DOM Style paddingRight Property Demo</h1>
<div class="outer-box">
<div class="inner-box">
</div>
</div>
<button type="button" onClick='addPadding()'>Add Padding</button>
<script>
function addPadding() {
var outerBox = document.querySelector('.outer-box')
outerBox.style.paddingRight = '20px';
}
</script>
</body>
</html>Output
Click on “Add Padding” button to add padding inside red box.
