盒子模型的内边距——padding
盒子由border（边框）、content（内容）、
padding（内边距）
、margin（外边距）。padding属性用于设置内边距，既边框与内容之间的距离。
padding的基础属性
单位一般是px：
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右边距 |
| padding-top | 上边距 |
| padding-bottom | 下边距 |
padding复合属性
padding简写属性可以有一到四个值。
| 值的个数 | 表达意思 |
|---|---|
| padding：5px； | 1个值，代表上下左右都5px |
| padding：5px 10px； | 2个值，代表上下5px，左右10px |
| padding：5px 10px 20px； | 3个值，代表上5px 左右10px 下20px |
| padding：5px 10px 20px 30px； |
4个值，代表上5px 右10px 下20px 左30px （顺时针） |
padding会影响盒子实际大小
给盒子指定padding值之后，会发生2件事情：
- 内容和边框有了距离，添加了内边距。
-
padding影响了盒子的实际大小
。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
案例：
加padding前：
<style>
div {
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
<body>
<div> 123</div>
</body>
运行结果：
加padding后：
<style>
div {
width: 200px;
height: 200px;
background-color: aquamarine;
padding: 20px;
版权声明：本文为weixin_44004120原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。