1. 犀牛前端部落首页
  2. CSS教程

css padding属性

css padding属性

padding属性通常在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个值

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

padding: 20px 10px;

3个值

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

padding: 20px 10px 30px;

4个值

使用4个值,第一个应用于顶部,第二个应用于右侧,第三个应用于底部,第四个应用于左侧。

padding: 20px 10px 5px 0px;

顺序是,从上到右,从下到左。

单位

填充接受以任何长度单位表示的值,最常见的是px, em, rem,但还有很多其他的长度单位。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4588.html

发表评论

登录后才能评论