CSS padding

CSS padding属性定义元素内容和元素边框之间的空白.

padding属性清除元素里的内容(在边框内)周围的区域.

注意:padding属性受元素的背景色影响!

使用CSS,你可以完全控制padding属性.有一些CSS属性用于设置元素的每个边(上、右、底和左)的填充.

padding - 各边设置

CSS可以给元素的每一侧指定填充的属性:

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

所有padding属性都可以具有以下值:

• length - 用px,pt,cm等指定填充大小.
• % - 用包含元素宽度的百分比(%)来指定填充大小.
• inherit - 指定应从父元素继承填充.

下面的示例为<p>元素的所有四面设置不同的填充:

padding - 简写属性

要缩短代码,可以在一个属性中指定所有填充属性.

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

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

因此,以下是它的工作原理:

如果padding属性有四个值:

• padding: 25px 50px 75px 100px;
• 顶部填充25px
• 右侧填充50px
• 底部填充75px
• 左侧填充100px

如果padding属性有三个值:

• padding: 25px 50px 75px;
• 顶部填充25px
• 右侧和左侧填充都是50px
• 底部填充75px

如果padding属性有两个值:

• padding: 25px 50px;
• 顶部和底部填充25px;
• 右侧和左侧填充50px

如果padding属性有一个值:

• padding: 25px;
• 四个边都是填充25px

全部CSS 填充属性