Style padding 屬性

Style 對象

定義和用法

padding 屬性設置或返回元素的內邊距。

該屬性可使用 1 到 4 種值：

如果規(guī)定一種值，比如：div {padding: 50px} - 所有四個內邊距都是 50px。
如果規(guī)定兩種值，比如：div {padding: 50px 10px} - 上內邊距和下內邊距是 50px，左內邊距和右內邊距是 10px。
如果規(guī)定三種值，比如：div {padding: 50px 10px 20px} - 上內邊距是 50px，左內邊距和右內邊距是 10px，下內邊距是 20px。
如果規(guī)定四種值，比如：div {padding: 50px 10px 20px 30px} - 上內邊距是 50px，右內邊距是 10px，下內邊距是 20px，左內邊距是 30px。

語法

設置 padding 屬性：

Object.style.padding="%|length|inherit"

返回 padding 屬性：

Object.style.padding

值	描述
%	定義基于父元素寬度的百分比內邊距。
length	使用 px、cm 等單位定義內邊距的寬度。
inherit	內邊距從父元素繼承。

瀏覽器支持

所有主要瀏覽器都支持 padding 屬性。

注意：IE7 及更早的版本不支持 "inherit" 值。IE8 只有規(guī)定了 !DOCTYPE 才支持 "inherit"。IE9 支持 "inherit"。

提示和注釋

margin 屬性和 padding 屬性都是在元素周圍插入空間。然而，不同的是，margin 將圍繞邊框外面插入空間，padding 將在元素邊框內插入空間。

實例

更改 div 元素的內邊距：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小白教程(json.cn)</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>

運行代碼 ?

Style 對象其他擴展

上一篇：Style overflowY 屬性下一篇：Style paddingBottom 屬性