paddingプロパティ
6.3 paddingプロパティ
padding(パディング)プロパティは、コンテンツの周囲に余白を定義するプロパティです。コンテンツエリアの周囲すべてに同じ余白を設定するには、プロパティをpaddingとし、値を1つ定義します。周囲に個別の余白を設定するには、場所に応じて、padding-top、padding-right、padding-bottom、padding-leftと記述します。値には長さや%などがあります。
paddingはショートハンドプロパティのため、周囲の余白をまとめて指定できます。その場合には、1つ以上4つまでの値を空白区切りで指定します。値の数により、定義する余白の対象が異なります。
値の数 |
適用場所の順序 |
記述例 |
余白の内容 |
値が1つ |
上下左右すべて |
padding: 10px |
上下左右それぞれに10px |
値が2つ |
上下と左右 |
padding: 5px 10px |
上下に5px、左右に10px |
値が3つ |
上、左右、下 |
padding: 3px 10px 5px |
上は3px、左右は10px、下は5px |
値が4つ |
上、右、下、左 |
padding: 3px 5px 8px 10px |
上は3px、右は5px、下は8px、左は10px |
表 6.3.1 : 値の指定方法
➢ paddingの記述例
セレクタ { padding: 値 ; }
スタイルを記述して実際の表示を確認しましょう。
①ソースフォルダ :webpage/ch06
②ファイル名 :padding.html
➢ padding.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>padding プロパティ</title> <style> .title { border: 5px solid orange; padding-top: 20px; padding-left: 100px; } .content { border: 10px dotted #20b392; padding: 0 0 50px 200px; } </style> </head> <body> <h1 class="title">padding プロパティの確認</h1> <div class="content"> <p>点線にしてみました</p> </div> </body> </html>
<h1 class=”title”></h1>のコンテンツとボーダーの左と上の間に余白が生まれ、文字の位置が少し右にずれて表示されます。同様に<div class=”content”></div>のコンテンツとボーダーの左と下の間に余白が生まれ。<p>要素がずれて表示されます。
◉ショートハンドプロパティとは
ボックスのマージンやパディングを指定するとき、margin-topやmargin-rightなど似たようなプロパティをいくつも記述するのは大変です。この記述の手間を軽減するのが、ショートハンドプロパティです。
マージンの指定には、marginプロパティ、パディングの指定にはpaddingプロパティを使用します。これらのプロパティを使用すれば、マージンやパディングの指定を1行で行うことができます。また、borderプロパティでもショートハンドプロパティで指定することができます。