CSS填充

CSS填充

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

填充清除周围的元素的含量（边界内）的区域。

	注意：填充被元件的背景颜色的影响！

使用CSS，您对填充完全控制。 有用于设置填充一个元素（上，右，下，左）的每一侧CSS属性。

填充 - 各个边

CSS有用于指定填充一个元素的每一侧属性：

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

所有的填充特性可以具有以下值：

• 长度 -指定填充px, pt, cm等。
• ％ -指定了在包含元素的宽度％的填充
• 继承 - 指定填充应该从父元素继承

下面的示例设置的四面不同的填充<p>元素：

填充 - 速记属性

为了缩短代码，有可能在一个属性来指定所有的填充性能。

该padding属性是以下个人padding属性速记属性：

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

所以，这里是它如何工作的：

如果padding属性有四个值：

• 填充：25像素50像素960x75像素100像素;
  • 顶边距为25像素
  • 右侧填充为50像素
  • 底部填充为960x75像素
  • 左填充为100px的

如果padding属性有三个值：

• 填充：25像素50像素960x75像素;
  • 顶边距为25像素
  • 左，右垫是50像素
  • 底部填充为960x75像素

如果padding属性有两个值：

• 填充：25像素50像素;
  • 顶部和底部的垫是25像素
  • 左，右垫是50像素

如果padding属性有一个值：

• 填充：25像素;
  • 所有四个垫都是25像素

更多示例

在一个声明中的所有padding属性
本实施例说明一个速记属性用于设置全在一个声明填充的性质，可以有一至四个值。

将左填充
这个例子演示了如何设置的左填充<p>元素。

将右填充
这个例子演示了如何设置的右填充<p>元素。

将顶部填充
这个例子演示了如何设置一个顶部填充<p>元素。

将底部填充
这个例子演示了如何设置的底部填充<p>元素。

自测练习用！

练习1» 练习2» 练习3»

所有的CSS padding属性