内边距区域 Padding area

Docs

简介

内边距区域 padding area 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。

padding 属性用于设置盒子的内边距，通常用于设置边框和内容之间的间距;
padding 包括四个方向，所以有如下的取值：
- padding-top：上内边距
- padding-right：右内边距
- padding-bottom：下内边距
- padding-left：左内边距
padding 单独编写是一个缩写属性：
- padding-top, padding-right, padding-bottom, padding-left 的简写属性
- padding 缩写属性是从零点钟方向开始, 沿着顺时针转动的，也就是上右下左;

padding 并非必须是四个值，也可以有其他值：

padding 值的个数	padding 例子	代表的含义
4	`padding: 10px 20px 30px 40px;`	top: 10px, right: 20px, bottom: 30px, left: 40px;
3	`padding: 10px 20px 30px;`	缺少 left, left 使用 right 的值;
2	`padding: 10px 20px;`	缺少 left, 使用 right 的值; 缺少 bottom, 使用 top 的值;
1	`padding: 10px;`	top/right/bottom/left 都使用 10;

- padding | MDN (mozilla.org)

- padding-top - CSS | MDN (mozilla.org)