如何在CSS中使用padding

84 阅读1分钟

如何在CSS中使用padding

padding 这个CSS属性在CSS中常用来在元素的内侧增加空间。

请记住。

  • margin 在元素边框外增加空间
  • padding 在元素边框内增加空间

特定的padding属性

padding 有4个相关的属性可以一次性改变单个边缘的填充。

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

这些的用法非常简单,不能混淆,比如说。

padding-left: 30px;
padding-right: 3em;

使用padding 速记符

padding 是一种速记方法,可以同时指定多个padding值,根据输入值的多少,它的表现也不同。

1个值

使用一个值将其应用于所有的填充物:上、右、下、左。

2个值

使用2个值,将第一个值应用于底部和顶部,将第二个值应用于左侧和右侧

3个值

使用3个值,第一个值用于顶部,第二个值用于左和右,第三个值用于底部

4个值

使用4个值时,第一个值在上面,第二个值在右边,第三个值在下面,第四个值在左边

padding: 20px 10px 5px 0px;

所以,顺序是上-右-下-左

接受的值

padding 接受以任何长度单位表示的值,最常见的是px、em、rem,但也有许多其他的单位。