説明
paddingはボックス領域の内側の余白を指定します。

上記の黒枠に対して赤の矢印部分が内側の余白です。
padding-topが上、padding-rightが右、padding-bottomが下、padding-leftが左の余白の指定で、paddingはこれを一括で設定出来ます。
似た設定にmarginがありますが、こちらは外側の余白です。

paddingプロパティは内側の余白を上下左右一括で指定出来ます。padding-topは内側の上、margin-rightは右、margin-bottomは下、margin-leftは左の余白になります。
paddingはボックス領域の内側の余白を指定します。
上記の黒枠に対して赤の矢印部分が内側の余白です。
padding-topが上、padding-rightが右、padding-bottomが下、padding-leftが左の余白の指定で、paddingはこれを一括で設定出来ます。
似た設定にmarginがありますが、こちらは外側の余白です。
paddingプロパティの構文は以下の通りです。
padding: 上の余白 右の余白 下の余白 左の余白;
以下のように2つ以上をまとめて指定する事も出来ます。
padding: 上下の余白 左右の余白;
padding: 上下左右の余白;
padding-topプロパティの構文は以下の通りで、padding-right等も同様です。
padding-top: 上の余白;
余白の指定は以下が出来ます。
指定 | 説明 |
---|---|
px | ピクセル指定 |
em | 文字の大きさに対する割合 |
% | 幅や高さに対する割合 |
auto | 左右にだけ使え、自動調整します。 |
paddingの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。
div {
padding: 10px 5px 10px 40px;
}
<div>padding例</div>
上記を表示すると以下になります。尚、分かり易さのため、背景を付けています。
黄色の背景色の部分が指定した余白になります。
上下と左右で指定する場合は以下の通りです。
div {
padding: 1em 2em;
}
<div>padding例</div>
上記を表示すると以下になります。
上下に1文字分、左に2文字分の余白が取られています。右側は文字数が多くなると2文字分の余白を持って折り返されます。
上下左右一括で指定する場合は以下の通りです。
div {
padding: 20px;
}
<div>padding例</div>
上記を表示すると以下になります。
上下左右で20pxの内側の余白が取られます。
padding-leftの例は以下の通りです。
div {
padding-left: 20%;
}
<div>padding例</div>
上記を表示すると以下のように取れる横幅の20%の余白が取られます。
padding-leftは左の余白だけ変えたい時に使います。padding-topやright、bottomの使い方も同様です。
上や下に10%と指定するとと高さの10%ではなく、横幅の10%が余白になります。
上記ではpadding-topで10%の指定をして、点線の枠で横幅を200pxに指定しているため、上に20pxの余白が出来ます。
・ホームページ作成「CSSのボックスモデル」
paddingだけでなく、ボックス全体の説明をしています。
・ホームページ作成「スタイルシートの定義方法」
外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ