手册
目录
收藏407
分享
阅读3927
更新时间2025-07-16
前言：
Padding 用于在元素的内容周围创建空间，这个空间位于任何已定义的边框内部。
CSS 的 padding 属性用于在元素内容周围生成空间，这个空间位于任何已定义的边框内部。
使用 CSS，你可以完全控制内边距。CSS 提供了为元素的每一边（上、右、下、左）分别设置内边距的属性。
CSS 提供了用于设置元素每一边内边距的属性：
padding-toppadding-rightpadding-bottompadding-left所有内边距属性的值可以是以下几种：
注意： 不允许使用负值。
为一个 <div> 元素的四边设置不同的内边距：
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
为了缩短代码，可以使用一个属性来同时指定所有的内边距属性。
padding 是以下单独内边距属性的简写属性：
padding-toppadding-rightpadding-bottompadding-left其工作方式如下：
如果 padding 属性有四个值：
使用四个值的 padding 简写属性：
div {
padding: 25px 50px 75px 100px;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
如果 padding 属性有三个值：
使用三个值的 padding 简写属性：
div {
padding: 25px 50px 75px;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
如果 padding 属性有两个值：
使用两个值的 padding 简写属性：
div {
padding: 25px 50px;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
如果 padding 属性只有一个值：
使用一个值的 padding 简写属性：
div {
padding: 25px;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
CSS 的 width 属性用于指定元素内容区域的宽度。内容区域是指元素内部 padding、border 和 margin 所包围的部分（即盒模型）。
因此，如果某个元素设置了宽度，添加的内边距会增加到该元素的总宽度中。这通常是不希望出现的结果。
在此示例中，<div> 元素的宽度被设置为 300px。但实际上，该 <div> 的总宽度将是 350px（300px + 左边距 25px + 右边距 25px）：
div {
width: 300px;
padding: 25px;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
为了无论内边距多少，宽度始终保持为 300px，可以使用 box-sizing 属性。这将使元素保持其实际宽度；如果增加内边距，内容区域的可用空间将减少。
使用 box-sizing 属性，使宽度始终保持为 300px，无论内边距多少：
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
设置左边距
本示例演示如何设置 <p> 元素的左边距。
设置右边距
本示例演示如何设置 <p> 元素的右边距。
设置上边距
本示例演示如何设置 <p> 元素的上边距。
设置下边距
本示例演示如何设置 <p> 元素的下边距。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.7万人学习
共29课时
62.2万人学习
共25课时
39.6万人学习
共43课时
71.5万人学习
共25课时
62.1万人学习
共22课时
23.2万人学习
共28课时
34.3万人学习
共89课时
126.3万人学习
