CSS 填充：Padding

文章目录

• CSS 填充
• 填充- 单边内边距属性
• 填充 - 简写属性
• 示例
• • 1，在一个声明中的所有填充属性
  • 2，设置左部填充
  • 3，设置右部填充
  • 4，设置上部填充
  • 5，设置下部填充
• CSS 填充属性

CSS 填充

CSS中的填充（Padding）属性定义了元素边框与元素内容之间的空间。可以通过单独使用填充属性或使用缩写填充属性一次性改变上下左右的填充。

例如，如果希望元素的填充在所有四个方向上都增加10像素，可以这样设置：

padding: 10px;

如果只想改变某一个方向的填充，可以使用以下四个单独的属性：

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

以上述方式设置后，元素的上、右、下、左四个方向的填充将分别增加10、20、30、40像素。

填充- 单边内边距属性

在CSS中，填充-单边内边距属性用于指定元素某一个方向的内边距。具体包括padding-top、padding-right、padding-bottom、padding-left四个属性，分别对应元素的上、右、下、左四个方向的内边距。

例如，如果想让元素的上内边距为10像素，右内边距为20像素，下内边距为30像素，左内边距为40像素，可以这样设置：

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

此外，为了简化代码，还可以使用padding属性来一次性设置所有方向的内边距。例如：

padding: 10px 20px 30px 40px;

上述代码与前面的设置具有相同的效果，但只需一行代码即可完成。其中，第一个值对应上内边距，第二个值对应右内边距，第三个值对应下内边距，第四个值对应左内边距。

填充 - 简写属性

CSS中的填充（Padding）属性是 一个简写属性，用于设置元素所有内边距的宽度。可以使用1到4个值来设置上下左右的填充。

当只有一个值时，它将应用于所有四个边距。例如：padding: 25px; 将会使元素的上、下、左、右四个方向的内边距都为25像素。

当有两个值时，第一个值应用于上下边距，第二个值应用于左右边距。例如：padding: 10px 20px; 将会使元素的上、下内边距为10像素，左、右内边距为20像素。

当有三个值时，第一个值应用于上边距，第二个值应用于左右边距，第三个值应用于下边距。例如：padding: 10px 20px 30px;将会使元素的上内边距为10像素，左、右内边距为20像素，下内边距为30像素。

当有四个值时，它们分别应用于上、右、下、左的边距，顺时针计算。例如：padding: 10px 20px 30px 40px;将会使元素的上内边距为10像素，右内边距为20像素，下内边距为30像素，左内边距为40像素。

以上是填充简写属性的基本使用方法，可以按照具体需要对各个方向的填充进行设置。

示例

1，在一个声明中的所有填充属性

以下是一个CSS填充示例，展示如何在一条声明中设置所有填充属性：

padding: 10px 8px 10px 9px;

在这个例子中，设置了四个填充值：上、右、下、左。这些值分别应用于元素的上、右、下、左四个方向的内部与边框之间的空间。具体来说，这个例子的意思是：

• 上填充为10像素
• 右填充为8像素
• 下填充为10像素
• 左填充为9像素

需要注意的是，当一个值在声明中被省略时，它将从其相反的方向（例如，如果上填充未声明，则下填充将应用于上）获取该值。因此，以下的声明将产生与上述示例相同的效果：

padding: 10px 8px;

在这个声明中，上填充为10像素，右填充为8像素。由于没有声明下和左的值，因此它们将从相反的方向获取值，即下填充为10像素（从上填充获取），左填充为8像素（从右填充获取）。

2，设置左部填充

以下是一个CSS填充示例，展示如何设置左部填充：

padding-left: 20px;

在这个例子中，使用了padding-left属性来设置元素左边缘的填充宽度为20像素。这将使元素的内容与左边缘之间有一个20像素的空间。可以根据需要调整这个值，以改变左部填充的大小。

3，设置右部填充

在CSS中，可以使用padding-right属性来设置元素右边缘的填充宽度。例如，如果想让元素的右填充为15像素，可以这样设置：

padding-right: 15px;

这样，元素的内容与右边缘之间就会有一个15像素的空间。可以根据需要调整这个值，以改变右部填充的大小。

4，设置上部填充

在CSS中，可以使用padding-top属性来设置元素上边缘的填充宽度。例如，如果想让元素的上填充为10像素，可以这样设置：

padding-top: 10px;

这样，元素的内容与上边缘之间就会有一个10像素的空间。可以根据需要调整这个值，以改变上部填充的大小。

5，设置下部填充

在CSS中，可以使用padding-bottom属性来设置元素下边缘的填充宽度。例如，如果想让元素的下填充为5像素，可以这样设置：

padding-bottom: 5px;

这样，元素的内容与下边缘之间就会有一个5像素的空间。可以根据需要调整这个值，以改变下部填充的大小。

CSS 填充属性