paddingプロパティ

TOPページに戻る > CSS

スポンサード リンク

paddingプロパティ

html要素の枠線の内側に余白を指定します
paddingプロパティを使えば要素の内側の上下左右に余白を作ることができます
上下左右のパディングを一括で指定できるので便利です
paddingプロパティは1~4つの値を指定できます

使い方(書式)

セレクタ { padding: 値; }                                    

paddingプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 しない

プロパティの値 説明
単位 px、emなどの単位
% パーセンテージで指定。要素が表示できる幅に対しての割合
0 余白なし

値の数 説明
値が1つ 「上下左右」のpaddingを一括で指定する
値が2つ 「上下」「左右」 1つ目が上下、2つ目が左右のpadding
値が3つ 「上」「左右」「下」 1つ目が上、2つ目が左右、3つ目が下のpadding
値が4つ 「上」「右」「下」「左」 1つ目が上、2つ目が右、3つ目が下、4つ目が左のpadding


実際の指定方法

.hoge { padding: 30px; }     /* 上下左右の値を一括指定  */
.hoge2 { padding: 20px 10px; }     /* 上下、左右の値を指定 */
.hoge3 { padding: 20px 30px 15px; }   /* 上、左右、下の値を指定 */
.hoge4 { padding:  20px 40px 10px 60px; }   /* 上右下左の値を1つずつ指定 */

html部分

<div class="hoge">padding: 30px; 上下左右の値を一括指定</div>

<div class="hoge2">padding: 20px 10px; 上下、左右の値を指定</div>

<div class="hoge3">padding: 20px 30px 15px; 上、左右、下の値を指定</div>

<div class="hoge4">padding:  20px 40px 10px 60px; 上、右、下、左の値を1つずつ指定</div>

実際の表示(わかりやすいように枠線をつけています)

padding: 30px; 上下左右の値を一括指定

padding: 20px 10px; 上下、左右の値を指定

padding: 20px 30px 15px; 上、左右、下の値を指定

padding: 20px 40px 10px 60px; 上、右、下、左の値を1つずつ指定。4つ値を指定する場合は、上から時計回りに指定します

marginとpaddingの違い

paddingがHTML要素の内側の余白を指定しているのに対して、marginは指定した要素の外側の余白を指定します

css

.hogebox { border: 1px solid #000; } /* 要素の外のboxに枠線をつけました */

.padding {
 margin: 20px;      /* 要素の外側の余白を一括指定 */
 padding: 30px;     /* 要素の内側の余白を一括指定 */
 border: 1px solid #000;      /* 枠線をつけました */
 }

html部分

<div class="hogebox">margin: 20px; html要素の枠の外側の余白
<div class="padding">padding: 30px; html要素の枠の内側の余白</div>
</div>

実際の表示(わかりやすいように枠線をつけています)

margin: 20px; html要素の枠の外側の余白
padding: 20px; html要素の枠の内側の余白



(C)2012 ホームページ作成無料