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屬性