CSS padding 属性

本文详细介绍了CSS中的padding属性,包括其用法、浏览器支持情况及不同值的应用示例。通过阅读本文,读者可以了解如何使用简写形式来设置元素的内边距。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CSS padding 属性

实例

设置 p 元素的 4 个内边距:

p
  {
  padding:2cm 4cm 3cm 4cm;
  }

亲自试一试

浏览器支持

所有浏览器都支持 padding 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

定义和用法

padding 简写属性在一个声明中设置所有内边距属性。

说明

这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注释:不允许使用负值。

例子 1
padding:10px 5px 15px 20px;
  • 上内边距是 10px
  • 右内边距是 5px
  • 下内边距是 15px
  • 左内边距是 20px
例子 2
padding:10px 5px 15px;
  • 上内边距是 10px
  • 右内边距和左内边距是 5px
  • 下内边距是 15px
例子 3
padding:10px 5px;
  • 上内边距和下内边距是 10px
  • 右内边距和左内边距是 5px
例子 4
padding:10px;
  • 所有 4 个内边距都是 10px
默认值: 0
继承性: no
版本: CSS1
JavaScript 语法: object.style.padding="10px 5px"

可能的值

描述
auto 浏览器计算内边距。
length 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的内边距。
inherit 规定应该从父元素继承内边距。

TIY 实例

所有内边距属性在一个声明中
本例演示使用简写属性将所有的内边距属性设置于一个声明中,可以有一到四个值。

相关页面

CSS 教程:CSS 内边距

HTML DOM 参考手册:padding 属性

### CSS `margin` 和 `padding` 属性的区别 #### 定义与功能差异 `margin`(外属性定义元素周围的空间,主要用于在元素的外部创建空白区域,以便分隔该元素与其他相邻元素之间的离[^4]。而`padding`(填充)则是在元素内部创建空白区,具体来说是指元素内容与框之间的空间,用于控制文本或其他内部元素与元素界间的离。 #### 对布局的影响 由于`margin`位于元素之外,所以它直接影响到页面上的其他元素的位置;增加某个元素的`margin`会使周围的元素远离这个元素移动相应量的离。相反,`padding`只影响其所在元素的内容显示范围而不改变整个文档流中的相对定位关系[^1]。 #### 设置方式 对于两者而言,在设置具体的数值时都支持四个方向分别指定——即上右下左顺序依次赋值给对应的参数项。如果某些方向上的取值相同,则可以通过简化形式来表达: - 当全部四个方向相同时可以直接写作单个长度单位; - 上下左右成对相等的情况下可以用两个数表示,前者代表垂直方向后者水平方向; - 若仅有三个方位需特别设定的话就采用三元组的形式,其中间那个数字对应于左右两侧[^3]。 ```css /* 单一值应用于四面 */ .margin-all { margin: 20px; } .padding-all { padding: 20px; } /* 前者上下 后者左右 */ .margin-vertical-horizontal { margin: 10px 20px; } .padding-vertical-horizontal { padding: 10px 20px; } /* 首位顶部 中间左右 尾部底部 */ .margin-three-sides { margin: 10px 20px 30px; } .padding-three-sides { padding: 10px 20px 30px; } ``` #### 实际应用场景举例 假设有一个按钮组件,想要让此按钮四周留有一定间以避免紧贴页面缘或其它控件放置得太近显得拥挤不堪,这时就可以适当增大它的`margin`值使得整体看起来更加美观舒适。而对于按钮本身内部的文字和背景颜色之间也需要保持一定间隙以免视觉效果不佳,此时便可通过调整`padding`达到理想状态[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值