×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

11. ボックスモデル(パディング)

ここでは、ボックスモデルにおけるパディング幅のプロパティについて説明する。

パディング幅のプロパティ

パディング幅を設定するプロパティには、「padding-top(上パディング)」、「padding-bottom(下パディング)」、「padding-left(左パディング)」、「padding-right(右パディング)」およびこれら4種類のプロパティの 一括指定を行う簡略記法の「padding」がある。

パディング幅の設定

padding-top、padding-bottom、padding-left、padding-rightプロパティ

padding-topプロパティ」は上パディングの幅、「padding-bottomプロパティ」は下パディングの幅、「padding-leftプロパティ」は左パディングの幅、「padding-rightプロパティ」は右パディングの幅を指定する。 その書式は以下のとおりである。

padding-top、padding-bottom、padding-left、padding-rightプロパティ
<パディング幅> | inherit
初期値0
適用対象すべての要素(テーブル内部要素(行、列類)は除外する)
継承しない
パーセント値包含ブロックの横幅に対する割合

<パディング幅>」に指定する値はつぎのとおりである。

<長さ>
マージン幅をemやexなどの単位付き数値で指定する。ただし、負の数値は指定できない。
<%値>
マージン幅を包含ブロックの横幅に対する割合で指定する。ただし、負の数値は指定できない。

paddingプロパティ

paddingプロパティ」は上下左右のパディングの幅を一括して指定する。 その書式は以下のとおりである。

paddingプロパティ
<パディング幅>{1,4} | inherit
初期値個別のプロパティを参照する
適用対象すべての要素(テーブル内部要素(行、列類およびセル)は除外する)
継承しない
パーセント値包含ブロックの横幅に対する割合

paddingプロパティの4つの値の指定方法は、marginプロパティと同じである。

  • パッディング幅が「1つだけ指定」されている場合は、「上下左右のパディング幅」が指定された値で等しく設定される。
    p { padding: 1em }
    
  • パディング幅が「2つ指定」されている場合は、最初に指定された値で「上下パディング」を、2番目に指定された値で「左右パディング」を等しく設定する。
    p { padding: 1em 2em }
    
  • パディング幅が「3つ指定」されている場合は、最初に指定された値で「上パディング」を、2番目に指定された値で「左右パディング」を等しく、 3番目に指定された値で「下パディング」を設定する。
    p { padding: 1em 2em 3em }
    
  • パディング幅が「4つ指定」されている場合は、最初に指定された値で「上パディング」を、2番目に指定された値で「右パディング」を、 3番目に指定された値で「下パディング」を、4番目に指定された値で「左パディング」をそれぞれ設定する。
    p { padding: 1em 2em 3em 4em }
    

ページの先頭に戻る


Copyright c 2006-2007 御隠居 (滄洲). All Rights Reserved.