padding用于设置元素内容与边框间的空白，影响背景填充且增加元素占用空间；可通过四个方向属性或简写语法设置，结合box-sizing可控制尺寸表现，合理使用能提升页面可读性与视觉舒适度。
在网页布局中，控制元素内部的留白能让内容更易读、视觉更舒适。CSS 的 padding 属性就是专门用来设置元素内容与边框之间的空白区域的。
理解 padding 的作用
padding 在元素的内容周围创建空白区，这个区域会背景色或背景图像填充，但不会影响边框以外的其他元素位置。它分为四个方向：
- padding-top：上内边距
- padding-right：右内边距
- padding-bottom：下内边距
- padding-left：左内边距
使用简写语法快速设置
你可以用一个 padding 属性同时设置四个方向，简化代码：
- padding: 10px; — 四个方向都是 10px
- padding: 10px 20px; — 上下 10px，左右 20px
- padding: 10px 20px 15px; — 上 10px，左右 20px，下 15px
- padding: 10px 20px 15px 25px; — 顺时针：上、右、下、左
结合盒模型理解效果
padding 是盒模型的一部分，它会增加元素的实际占用空间。比如一个 div 宽度是 200px，加上左右各 20px 的 padding，那么它在页面中占据的总宽度就是 240px（除非使用 box-sizing: border-box）。
立即学习“前端免费学习笔记（深入）”；
推荐统一设置：
div {
box-sizing: border-box;
width: 200px;
padding: 20px;
}
这样，padding 会被包含在 200px 内，不会撑大元素。
实用建议
在实际开发中，合理使用 padding 可以提升用户体验：
- 给按钮添加上下 padding，让文字更容易点击
- 段落周围加 padding，避免文字贴边
- 卡片类容器用一致的 padding 保持视觉统一
