目录

style padding 属性

示例

设置 <div> 元素的填充:

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
亲自试一试 »

描述

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

浏览器支持

Property
padding Yes Yes Yes Yes Yes

语法

返回填充属性:

object.style.padding

设置填充属性:

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

属性值

Value Description
% Defines the padding in % of the width of the parent element
length Defines the padding in length units
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit


技术细节

默认值: 0
返回值: 一个字符串,表示元素的填充
CSS版本 CSS1

更多示例

示例

将 <div> 元素所有四个边的填充更改为"25px":

document.getElementById("myDiv").style.padding = "25px";
亲自试一试 »

示例

返回 <div> 元素的填充:

alert(document.getElementById("myDiv").style.padding);
亲自试一试 »

示例

margin属性和padding属性的区别:

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

function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}
亲自试一试 »

相关页面

CSS教程:CSS 填充

CSS 参考:填充属性