padding 内边距属性

最后更新：2026-09-13

padding padding 内边距属性

padding 属性用于设置元素内容与边框之间的内部空间。它是 CSS 盒模型的重要组成部分，常用于让内容在容器中留出呼吸空间、增大点击区域或配合背景色让内容更醒目。padding 的值只能是长度或百分比，不能为负值，也不会发生折叠。

分类
初始值	0
继承	否
适用于	all
可动画	length
CSS 版本	CSS1
状态	标准

📝 语法

padding: <length> | <percentage>;

⚙️ 取值

值	类型	描述
`<length>`	类型	固定内边距值
`<percentage>`	类型	相对包含块宽度的百分比

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
padding	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

注意： 默认情况下，padding 会加到元素的 width/height 之外（content-box），可能导致元素比预期更大。设置 box-sizing: border-box; 可以让 padding 包含在设定的宽高之内。

提示： padding 的百分比值始终相对于包含块的宽度计算，包括 padding-top 和 padding-bottom。

❓ 常见问题

Qpadding 可以为负值吗？

A不可以。padding 的取值只能是长度或百分比，且不能为负数，负值会被浏览器视为无效声明而忽略。如果需要让内容向外扩展，可以考虑减小 padding 或改用负 margin（margin 允许负值，能把元素整体向外拉）。记住：padding 只能往内挤压内容，不能向外。

Qpadding 会影响背景色的范围吗？

A会。background-color 渲染到 padding 区域（padding 属于盒子背景一部分），但不会延伸到 margin 区域。padding 越大背景覆盖越大；想让按钮点击区域更大、视觉更饱满，增加 padding 最直接。border-radius 圆角也是裁剪 padding 区域的背景。

Qpadding 的百分比是相对于谁计算的？

Apadding 的百分比始终相对包含块的宽度计算，包括 padding-top/bottom 也按宽度算，而非高度。此特性常用于实现等比例容器（padding-top hack）：设 padding-top:56.25%（16:9）撑出高度，是 aspect-ratio 出现前的经典方案。

Q为什么设置 padding 后元素变大了？

A因为默认 content-box 下 width 只指内容区，padding 和 border 额外加在宽度之外，实际占位变大。把元素设为 box-sizing:border-box 后，width 包含 padding 和 border，内容向内收缩，总宽不变。这也是全局推荐 border-box 的原因。