W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 填充(Padding)



CSS Padding 属性

CSS的 padding 属性是用于生成空间的内容。

填充属性设置大小的元素内容和元素之间的空格。

这个元素有50px的填充空间。


CSS Padding(填充)

CSS padding(填充)属性定义元素边框与元素内容之间的空间。

CSS padding(填充)属性清除元素的内容(边框内部)周围的区域。

Note 提示: 当元素的 padding(填充)(内边距)被清除时,所 "释放" 的区域将会受到元素背景颜色的填充。

Padding - 单边内边距属性

在CSS中,它可以指定不同的侧面不同的填充:

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

所有的padding(填充)属性可以具有以下值:

  • length - 定义一个固定的填充(像素,pt,em等)
  • % - 使用百分比值定义一个填充
  • inherit - 指定该填充集成父元素

下面的实例对

元素的四个侧边距进行设置填充:

Example

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
尝试一下 »

Padding - 简写

为了缩短代码,它可以在一个属性中指定的所有填充属性。

padding 属性是下列单个填充属性的简写属性:

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

Example

p {
    padding: 50px 30px 50px 80px;
}
尝试一下 »

padding 属性可以有一到四个值:

  • 上填充为25px
  • 右填充为50px
  • 下填充为75px
  • 左填充为100px

padding:25px 50px 75px;

  • 上填充为25px
  • 左右填充为50px
  • 下填充为75px

padding:25px 50px;

  • 上下填充为25px
  • 左右填充为50px

padding:25px;

  • 所有的填充都是25px

Examples

更多实例

在一个声明中的所有填充属性
这个例子演示了使用缩写属性设置在一个声明中的所有填充属性,可以有一到四个值。

设置左部填充
这个例子演示了如何设置元素左填充。

设置右部填充
这个例子演示了如何设置元素右填充。

设置上部填充
这个例子演示了如何设置元素上填充。

设置下部填充
这个例子演示了如何设置元素下填充。


所有的CSS填充属性

属性 描述
padding 使用缩写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充