Javascript Reference - HTML DOM Style paddingRight Property

The paddingRight property sets or get the right padding of an element.

Browser Support


`paddingRight`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the paddingRight property:

var v = object.style.paddingRight;

Set the paddingRight property:

object.style.paddingRight='%|length|initial|inherit'

Property Values

Value	Description
%	Set the right padding in pecent of the width of the container element
length	Set the right padding in length units
initial	Set to default value.
inherit	Inherit from its parent element.

Technical Details

Default Value:	0
Return Value:	A string representing the right padding
CSS Version	CSS1

Example

The following code shows how to set the right padding.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from  ww  w  .  j ava2  s.  c  om-->
    border: 1px solid black;
    background-color: lightblue;
    width: 300px;
    height: 300px;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<div id="myDIV">
this is a test. this is a test. this is a test.
this is a test.this is a test. this is a test.
this is a test. this is a test. this is a test.
</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.paddingRight = "250px";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the right padding.


<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {<!--  w  ww.  j  a  v a 2s .c  o  m-->
    border: 1px solid black;
    background-color: lightblue;
    width: 300px;
    height: 300px;
}
</style>
</head>
<body>
<div id="myDIV" style="padding-right:5cm;">test</div>
<br>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myDIV").style.paddingRight);
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to set marginRight and paddingRight.


<!DOCTYPE html>
<html>
<head>
<style>
div {<!--from   ww  w. ja v  a2  s  .  c om-->
    border: 1px solid black;
    background-color: lightblue;
    height: 300px;
}
</style>
</head>
<body>
<div id="myDIV">this is a test. this is a test. 
this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. </div>
<button type="button" onclick="changeMargin()">right margin</button>
<div id="myDIV2">
this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. </div>
<button type="button" onclick="changePadding()">right padding</button>

<script>
function changeMargin() {
    document.getElementById("myDIV").style.marginRight = "200px";
}

function changePadding() {
    document.getElementById("myDIV2").style.paddingRight = "200px";
}
</script>

</body>
</html>

The code above is rendered as follows: