内部の余白 (padding)


padding属性

 paddingはコンテナの境界と内容の間の余白です(下の図参照)。

CSS Box Model

 paddingは、margin属性で設定しました。自オブジェクトの境界と内容との余白はpadding属性で設定します。

 下の例はpadding属性を使って領域に表示する文字列との余白を作っています。

#div1 {
  width: 200px;
  height: 100px;
  border: solid medium black;
  background-color: yellow;
  padding: 10px;
}
paddingとして10pxを設定しています。

 padding-left, padding-right, padding-top, padding-right属性を使うと、個別に余白を設定できます。

#div2 {
  width: 200px;
  height: 100px;
  border: solid medium black;
  background-color: yellow;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}
paddingとして左右10px、上下5pxを設定しています。

 padding属性は以下の値を設定することができます。

意味
length余白の値(デフォルトは0)
%余白の値(コンテナの幅や高さに対する相対値)
initial初期値(余白なし)
inherit親要素から継承する。

 

このページの先頭へ戻る