プロパティ padding

プロパティ padding は、要素の内側の余白を設定します。プロパティの値として使用できるのは、あらゆる サイズの単位 です。デフォルトでは、各ブラウザは要素にさまざまな余白を追加する場合があります。このプロパティは、以下のプロパティの短縮形です: padding-top, padding-right, padding-bottom, padding-left。

構文

cssセレクタ {
  padding: 値;
}

パラメータの数

プロパティ padding は、空白で区切られた 1、2、3、または 4 個の値を受け付けます:

例

このケースでは、デフォルトでは内側の余白はゼロとなり、テキストはブロックの境界にぴったりつきます:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 0;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

例

では、内側の余白を 30px にしてみましょう:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

例

現在、上下の余白は 20px、左右の余白は 5px になります:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 20px 5px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

例

現在、上の余白は 5px、右の余白は 15px、下の余白は 25px、左の余白は 35px です:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 5px 15px 25px 35px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

関連項目