Style padding 屬性

定義和用法

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

此屬性可以采用一到四個值：

margin 屬性 和 padding 屬性 都在元素周圍插入空間。但是，不同之處在于，margin 在邊框周圍插入空間，而 padding 在元素的邊框內插入空間。

  • 一個值，例如：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

另請參閱：

CSS 教程：CSS 內邊距

CSS 參考手冊：padding 屬性

實例

例子 1

設置 <div> 元素的內邊距：

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

親自試一試

例子 2

將 <div> 元素的所有四個邊的內邊距更改為 "25px"：

document.getElementById("myDiv").style.padding = "25px";

親自試一試

例子 3

返回 <div> 元素的內邊距：

alert(document.getElementById("myDiv").style.padding);

親自試一試

例子 4

margin 屬性與 padding 屬性的區別：

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

親自試一試

語法

返回 padding 屬性：

object.style.padding

設置 padding 屬性：

object.style.padding = "%|length|initial|inherit"

屬性值

值 描述
% 以父元素寬度的百分比定義內邊距。
length 以長度單位定義內邊距。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： 0
返回值： 字符串，表示元素的內邊距。
CSS 版本： CSS1

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持