CSS中添加padding，让元素有适当的内边距

在CSS中，
padding
属性用于为元素的内容和边框之间添加空间，从而改善元素的视觉呈现和可读性。适当的内边距可以让元素看起来更加整洁，并有助于改善页面布局。以下是如何使用
padding
属性来为元素添加内边距的详细指南。
基本用法
padding
属性可以接受一到四个值，分别对应元素的上、右、下、左内边距。以下是几种不同的用法：
单个值
.element {
padding: 20px;
}
这里，所有四个方向的内边距都被设置为20像素。
两个值
.element {
padding: 20px 10px;
}
第一个值表示上下内边距，第二个值表示左右内边距。
三个值
.element {
padding: 20px 10px 30px;
}
第一个值表示上内边距，第二个值表示左右内边距，第三个值表示下内边距。
四个值
.element {
padding: 20px 10px 30px 40px;
}
这四个值分别表示上、右、下、左内边距。
单独设置每个方向的内边距
除了使用
padding
属性的缩写形式外，还可以单独设置每个方向的内边距：
.element {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 40px;
}
这里，
padding-top
设置上内边距，
padding-right
设置右内边距，
padding-bottom
设置下内边距，
padding-left
设置左内边距。
百分比值
padding
的值也可以是百分比，这时它是相对于包含块的宽度来计算的（对于
padding-top
和
padding-bottom
，百分比值是基于包含块的高度计算的）：
.element {
padding: 10% 5% 15% 20%;
}
在这个例子中，上下内边距是包含块高度的10%，左右内边距是包含块宽度的5%，下内边距是包含块高度的15%，左内边距是包含块宽度的20%。
示例
以下是一个简单的HTML和CSS示例，展示了如何为