Style paddingRightProperty
Style Object
Definition and Usage
The paddingRight property sets or returns the right padding of an element.
Syntax
Set the paddingRight property:
Object.style.paddingRight="%|length|inherit"
Return the paddingRight property:
Object.style.paddingRight
| Value | Description |
|---|---|
| % | Defines the right padding as a percentage of the parent element's width. |
| length | Defines the width of the right padding using units such as px, cm, etc. |
| inherit | The right padding is inherited from the parent element. |
Browser Support
All major browsers support the paddingRight property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Tips and Notes
The margin and padding properties both insert space around an element. However, the difference is that margin inserts space outside the border, while padding inserts space inside the element's border.
Example
Example
Change the right padding of a div element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginRight="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingRight="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Modify the right margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Modify the right padding of the div element</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginRight="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingRight="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Modify the right margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Modify the right padding of the div element</button>
</body>
</html>
Try it Yourself »
Style Object Other Extensions