带有CSS“Padding”属性的HTML填充

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

【立即预定】CSS希妍萃蓝铜胜肽嫩肤精华抗初老淡纹紧致30ml
| 月销量16380件
优惠价426元
原价¥498

淘口令:

¥HxVCXGNZvj4¥
 

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.

Padding with Single Value
单值填充

填充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.

Padding with 4 Values
用4个值填充

填充3个值(上、左/右、下)

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

This paragraph has a 30 pixels padding for all sides.

This paragraph has a 70 pixels padding for all sides.

Padding with 3 Values
用3个值填充

用2个值填充

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

This paragraph has a 30 pixels padding for all sides.

This paragraph has a 70 pixels padding for all sides.

Padding with 2 Values
用2个值填充

用百分比值类型填充

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

This paragraph has a 30 pixels padding for all sides.

This paragraph has a 70 pixels padding for all sides.

Padding with Percentage Value Type
用百分比值类型填充

用em字号填充

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

This paragraph has a 30 pixels padding for all sides.

This paragraph has a 70 pixels padding for all sides.

Padding with em Font Size
用em字号填充

对单个填充使用多个单位

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

This paragraph has a 40 pixels padding from top side.

This paragraph has a 60 pixels padding from top side.

Using Multiple Units For Single Padding
对单个填充使用多个单位

填充为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.

Padding As Inline CSS Inside HTML Element Style Attribute
填充为HTML元素样式属性内的内联CSS

顶面衬垫

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 For 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 For Right Side
右侧衬垫

底侧衬垫

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

This paragraph has a 40 pixels padding from top side.

This paragraph has a 60 pixels padding from top side.

Padding For Bottom 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.

Padding For Left Side
左侧衬垫

© 版权声明
THE END
喜欢就支持一下吧,技术咨询可以联系QQ407933975
点赞0
分享