Style padding 屬性

Style 對象參考手冊 Style 對象

定義和用法

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

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

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

語法

設置 padding 屬性：

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

返回 padding 屬性：

Object.style.padding

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

流覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

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

提示和注釋

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

實例

實例

更改 div 元素的內邊距：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT研修(xuhuhu.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>


Style 對象參考手冊 Style 對象