在HTML5的页面开发中，元素边框和内部文字的距离会直接影响内容的呈现效果，当两者距离过近时，内容会显得拥挤，降低用户的阅读体验。要调整这个间距，核心是利用CSS盒模型中的内边距属性来实现。
盒模型基础概念
HTML5中的元素都遵循盒模型规则，一个完整元素的盒模型由内容区、内边距、边框、外边距四个部分组成。其中内边距（padding）就是内容与边框之间的距离，也就是我们说的边框与文字间距，调整padding的值就能直接改变这个间距的大小。
盒模型结构说明
| 组成部分 | 作用 |
|---|---|
| 内容区（content） | 放置文字、图片等实际内容的区域 |
| 内边距（padding） | 内容与边框之间的空白区域，控制边框与文字间距 |
| 边框（border） | 围绕内边距和内容区的边界线 |
| 外边距（margin） | 元素与其他元素之间的空白区域 |
设置边框与文字间距的具体方法
最直接的方式就是通过CSS的padding属性来设置，这个属性可以统一设置四个方向的内边距，也可以单独设置某个方向的值。
1. 统一设置四个方向的内边距
如果希望元素的上下左右四个方向的边框和文字间距保持一致，可以直接给元素设置padding属性，值为具体的长度单位，比如px、em、rem等。
/* 给类名为text-box的元素设置内边距为20px，即边框和文字四个方向的间距都是20px */
.text-box {
border: 2px solid #333; /* 设置2px深的黑色实线边框 */
padding: 20px; /* 四个方向的内边距都是20px */
width: 300px;
font-size: 16px;
}
对应的HTML结构如下：
<div class="text-box"> 这是一段测试文字，用来展示边框和文字之间的间距效果，当设置padding为20px之后，文字和边框之间会有20px的空白区域。 </div>
2. 单独设置某个方向的内边距
如果只需要调整某一个方向的边框与文字间距，可以使用padding的单方向属性，分别是padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距）。
/* 只设置下内边距为15px，其他方向内边距为0 */
.single-padding {
border: 1px dashed #666;
padding-bottom: 15px;
padding-top: 0;
padding-left: 0;
padding-right: 0;
width: 280px;
}
3. 使用padding简写规则设置不同方向间距
padding属性还支持简写规则，通过不同数量的参数设置不同方向的内边距：
- 1个参数：四个方向内边距相同，比如
padding: 10px - 2个参数：第一个是上下内边距，第二个是左右内边距，比如
padding: 10px 20px - 3个参数：第一个是上内边距，第二个是左右内边距，第三个是下内边距，比如
padding: 10px 20px 15px - 4个参数：依次是上、右、下、左内边距，比如
padding: 10px 20px 15px 25px
/* 上下内边距10px，左右内边距20px */
.multi-padding {
border: 2px solid #ff6600;
padding: 10px 20px;
width: 320px;
}
注意事项
在设置内边距的时候，需要注意box-sizing属性的影响。默认情况下，元素的box-sizing值为content-box，此时设置padding会增加元素的总宽度和高度。如果希望设置的width和height包含padding和border，可以将box-sizing设置为border-box。
/* 设置盒模型为border-box，width和height包含内容、内边距和边框 */
.box-border {
box-sizing: border-box;
width: 300px;
height: 200px;
border: 2px solid #333;
padding: 20px;
/* 此时元素总宽高还是300px*200px，不会加上padding和border的宽度 */
}
另外，内边距的值不能为负数，如果需要减小边框和文字的间距，只能设置更小的非负值，不能使用负数来让文字超出边框范围。