从设计的角度来看，填充HTML元素可以提供更好、更流畅的用户体验。可以使用CSS样式填充HTML元素。在本教程中，我们将学习如何用CSS填充HTML元素的不同或所有方面。

CSS填充语法

HTML填充由 padding CSS属性。我们可以单独使用padding属性，也可以在HTML元素样式属性中使用padding属性。

padding: PADDING_VALUES;

• `padding`是可以采用单个或多个padding值的属性名称。
• `PADDINGu VALUES`可以是单个或多个值，最多4个。所有不同的值计数都将有不同的PADDING实现，下面的示例将对此进行解释。

单值填充（上/右/下/左）

我们将从简单的步骤开始，我们将为padding CSS属性提供一个值，该值将用于所有4边的padding长度。

This paragraph has a 30 pixels padding for all sides.
This paragraph has a 70 pixels padding for all sides.

填充4个值（上、右、下、左）

我们还可以为HTML元素填充值的每一侧提供4个值。在本例中，我们将提供填充值 10px 20px 30px 40px 和 50px 70px 90px 110px .

This paragraph has a 30 pixels padding for all sides.
This paragraph has a 70 pixels padding for all sides.

填充3个值（上、左/右、下）

我们还可以提供3个值，其中第一个值用于顶部填充，第二个值用于右侧和左侧填充，第三个值用于底部填充。

This paragraph has a 30 pixels padding for all sides.
This paragraph has a 70 pixels padding for all sides.

用2个值填充

当我们为padding CSS属性提供2个值时，第一个值将用于顶部和底部，第二个值将用于右侧和左侧填充。

This paragraph has a 30 pixels padding for all sides.
This paragraph has a 70 pixels padding for all sides.

用百分比值类型填充

到目前为止，我们已经使用了 px 它是填充值的像素缩写形式。我们还可以使用父元素大小百分比用于填充的百分比。

This paragraph has a 30 pixels padding for all sides.
This paragraph has a 70 pixels padding for all sides.

用em字号填充

另一个填充大小单位是 em 与字体大小有关。1 em等于一个字母大小。

This paragraph has a 30 pixels padding for all sides.
This paragraph has a 70 pixels padding for all sides.

对单个填充使用多个单位

我们学会了使用不同的单位，比如 px , % , em 以设置填充大小。我们可以在一个填充示例中使用所有这些填充单元。

This paragraph has a 40 pixels padding from top side.
This paragraph has a 60 pixels padding from top side.

填充为HTML元素样式属性内的内联CSS

我们还可以使用CSS内联属性特性，这些特性与HTML一起使用 style 属性。下面我们将为padding设置一个值作为内联CSS。

This paragraph has a 40 pixels padding from top side.
This paragraph has a 60 pixels padding from top side.

顶面衬垫

CSS还提供了特定的边填充属性。 padding-top 仅用于顶部的填充。padding-top-CSS属性还可以与padding和其他padding属性一起使用，下面将对此进行解释。

This paragraph has a 40 pixels padding from top side.
This paragraph has a 60 pixels padding from top side.

右侧衬垫

我们只能在右边用 padding-right CSS属性如下。

This paragraph has a 40 pixels padding from top side.
This paragraph has a 60 pixels padding from top side.

底侧衬垫

我们可以用 padding-bottom 为了只垫底面。

This paragraph has a 40 pixels padding from top side.
This paragraph has a 60 pixels padding from top side.

左侧衬垫

我们可以用 padding-left CSS属性以设置HTML元素的左侧填充值。

This paragraph has a 40 pixels padding from top side.
This paragraph has a 60 pixels padding from top side.