HTML DOM Style padding property
Definition and Usage
padding property sets or returns the padding element.
This property can be used 1-4 kinds of values:
- If you specify a value, for example: div {padding: 50px} - all within four margins are 50px.
- If both values are specified, for example: div {padding: 50px 10px} - top and bottom margins on Nene is 50px, the left and right margins and padding is 10px.
- If you specify three values, for example: div {padding: 50px 10px 20px} - within the margins are 50px, the left and right margins and padding is 10px, bottom padding is 20px.
- If you specify four kinds of values, like: div {padding: 50px 10px 20px 30px} - within the margin is 50px, and right padding is 10px, bottom padding is 20px, the left margins are 30px.
grammar
Setting padding properties:
Object.style.padding="%|length|inherit"
Back padding properties:
Object.style.padding
值 | 描述 |
---|---|
% | 定义基于父元素宽度的百分比内边距。 |
length | 使用 px、cm 等单位定义内边距的宽度。 |
inherit | 内边距从父元素继承。 |
Browser Support
All major browsers support padding properties.
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 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.margin="100px";
}
function changePadding(){
document.getElementById("ex2").style.padding="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.margin="100px";
}
function changePadding(){
document.getElementById("ex2").style.padding="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