CSSパディング

CSSのパディング

CSSのパディングプロパティは、要素の内容と要素の境界線の間の空白を定義します。

パディングは要素の（境界線の内側）コンテンツの周りの領域をクリアします。

	注：パディングは要素の背景色の影響を受けています！

CSSを使用すると、パディングを完全に制御できます。 要素（左上、右、下、および）の各側面のためのパディングを設定するためのCSSプロパティがあります。

パディング - 各辺

CSSは、要素の各側面のためのパディングを指定するためのプロパティがあります。

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

すべてのパディングのプロパティは次の値を指定できます。

• 長さ -にパディングを指定するpx, pt, cmなど
• ％ -含む要素の幅の％でパディングを指定します
• 継承 - パディングは親要素から継承することを指定します

次の例では、4つのすべての辺に異なる余白を設定します<p>要素：

パディング - 速記プロパティ

コードを短くするためには、一つの特性のすべてのパディングプロパティを指定することが可能です。

paddingプロパティは、次の個々のパディングプロパティの短縮形プロパティです。

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

だから、ここでそれがどのように動作するかです：

場合paddingプロパティは、4つの値があります。

• パディング：25ピクセルは50px 75px 100pxに。
  • トップパディングは25ピクセルです
  • 右パディングは50pxです
  • 下のパディングは75pxです
  • 左パディング100pxにあります

場合paddingプロパティは、3つの値があります。

• パディング：25ピクセルは50px 75px;
  • トップパディングは25ピクセルです
  • 左右のパディングはは50pxです
  • 下のパディングは75pxです

場合paddingプロパティは、2つの値があります。

• パディング：25ピクセルは50px;
  • 上部と下部のパディングは25ピクセルです
  • 左右のパディングはは50pxです

場合paddingプロパティが1の値を持ちます。

• パディング：25ピクセル;
  • すべての4つのパディングは25ピクセルです

その他の例

1宣言内のすべてのパディングプロパティ
この例では、1宣言のpaddingプロパティのすべてを設定するための簡略記述特性を実証し、1から4の値にすることができます。

左パディングを設定します
この例では、左パディングを設定する方法を示します<p>要素を。

右のパディングを設定します
この例では、右パディングを設定する方法を示します<p>要素を。

トップパディングを設定します
この例では、上部パディングを設定する方法を示します<p>要素を。

下のパディングを設定します
この例では、下部パディングを設定する方法を示します<p>要素を。

練習で自分自身をテスト！

演習1» 演習2» 演習3»

すべてのCSSのパディングのプロパティ