CSS填充

如何在CSS中使用填充

paddingCSS属性通常在CSS中用于在元素内侧添加空间。

记住:

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

特定的填充属性

padding具有4个相关属性,可同时更改单个边的填充:

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

这些的用法非常简单,不能混淆,例如:

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

使用padding速记

padding是同时指定多个填充值的简写形式,并且根据输入的值的数量,其行为会有所不同。

1个值

使用单个值可将其应用于全部填充物:顶部,右侧,底部,左侧。

padding: 20px;

2个值

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

padding: 20px 10px;

3个值

使用3个值将第一个应用于最佳,第二个左右,第三个底部

padding: 20px 10px 30px;

4个值

使用4个值将第一个应用于最佳,第二个正确的,第三个底部,第四个剩下

padding: 20px 10px 5px 0px;

所以,顺序是右上-左下

接受值

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

免费下载我的CSS手册


更多CSS教程: