padding
解説
上下左右のパディング（要素の境界と中身との間隔部分）をまとめて指定します。上下左右を異なるパディング幅にしたい場合は、スペース区切りにて複数の値を指定します。パディングにマイナスの値は指定できません。値を1つ指定した場合は指定した値が[上下左右]のパディングとなります。値を2つ指定した場合は記述した順に[上下][左右]のパディングとなります。値を3つ指定した場合は記述した順に[上][左右][下]のパディングとなります。値を4つ指定した場合は記述した順に[上][右][下][左]のパディングとなります。
パーセント値での指定も可能ですが、包含ブロックの横幅に対する割合となっていることに注意して下さい。padding-topとpadding-bottomも高さではなく横幅を参照します。
marginとは違い、パディングにautoを指定することは出来ません。
プロパティ情報
参照
margin margin-top margin-bottom margin-left margin-right padding padding-top padding-bottom padding-left padding-right
使用例
ソース
CSSの記述方法はスタイルシートってなに？も参照下さい。 p.sample {background-color: #ffffff; margin: 0px;} div.sample1 {background-color: #ff0000; border: 1px solid #0000ff; padding: 10px;} div.sample2 {background-color: #ff0000; border: 1px solid #0000ff; padding: 10px 20px;} div.sample3 {background-color: #ff0000; border: 1px solid #0000ff; padding: 10px 20px 30px;} div.sample4 {background-color: #ff0000; border: 1px solid #0000ff; padding: 10px 20px 30px 40px;}
HTMLの記述方法 <div class="sample1"><p class="sample">サンプル<p>lt;/div> <div class="sample2"><p class="sample">サンプル<p>lt;/div> <div class="sample3"><p class="sample">サンプル<p>lt;/div> <div class="sample4"><p class="sample">サンプル<p>lt;/div>
表示結果
サンプル
サンプル
サンプル
サンプル
※視覚的に分かり易いよう中に白色のボックスを配置しています
