HTML DOM Style paddingRight property
Style Objects Definition and Usage
PaddingRight margin property sets or returns the element inside right.
grammar
Setting paddingRight properties:
Object.style.paddingRight="%|length|inherit"
Back paddingRight properties:
Object.style.paddingRight
| 值 | 描述 |
|---|---|
| % | 定义基于父元素宽度的百分比右内边距。 |
| length | 使用 px、cm 等单位定义右内边距的宽度。 |
| inherit | 右内边距从父元素继承。 |
Browser Support
All major browsers support paddingRight property.
Note: IE7 and earlier versions do not support the "inherit" value.IE8 only provides! DOCTYPE supported "inherit". IE9 support "inherit".
Tips and Notes
margin properties and padding properties are inserted into the space around the element. However, the difference is, margin will be inserted into the space around the outside of the border, padding inserts space within the element border.
Examples
Examples
Change div elements within the right margins:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.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">这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</div>
<br>
<button type="button" onclick="changeMargin()">修改div元素的右部外间距</button>
<br>
<br>
<div id="ex2">这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</div>
<br>
<button type="button" onclick="changePadding()">修改div元素的右部内间距</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.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">这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</div>
<br>
<button type="button" onclick="changeMargin()">修改div元素的右部外间距</button>
<br>
<br>
<div id="ex2">这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</div>
<br>
<button type="button" onclick="changePadding()">修改div元素的右部内间距</button>
</body>
</html>
try it"
Style Objects