「padding」CSSで要素の余白を指定する

ボックスモデルで紹介したように、ボックスにはパディングという要素があります。これは、コンテンツとボーダーの間の余白のことです。適度に余白が無いと文章が読みづらくなりますから、パディングの指定はデザインとしても重要な要素となります。

10141017-4

余白を指定するには、「padding-top」「padding-bottom」「padding-left」「padding-right」で上下左右を個別に指定可能です。値としては、「px」や「em」、「%」などを使用します。ただし、マイナスの値は指定できませんから、注意しましょう。

【CSS】
p.padi {padding-top: 30px;
padding-bottom: 50px;
background-color: #FFFF00;}


【HTML】
<p class=”padi”>パディングの指定</p>

分かりやすくするために背景の色を変えましたが、上下の余白が指定されていますよね。

パディングの指定

 

ショートハンドプロパティで上下左右を一括で指定する

先述したように、パディングは個別に余白を設定できます。しかし、「ショートハンドプロパティ」を使えば、四方向を同時に指定することが可能です。記述方法としては、「paddingプロパティ」を使用して値を記述します。

この時に、記述する数によって、スタイルが異なりますので注意しましょう。具体的には、以下のようになります。

値が1つ 「上下左右」の余白の指定
値が2つ 「上下」「左右」の余白の指定
値が3つ 「上」「左右」「下」の余白の指定
値が4つ 「上」「右」「下」「左」の余白の指定

ショートハンドプロパティを使えば、短いソースでスタイルを指定できます。時間の短縮にもなりますから、積極的に利用してください。

【CSS】
p.padi2 {padding: 30px 60px;
background-color: #FFFF00;}


【HTML】
<p class=”padi2″>パディングの指定</p>

上記の記述で、「上下」と「左右」の余白が一度に指定されました。

パディングの指定

 

以上、余白を指定する方法を紹介しました。「padding」は、「margin」と一緒に覚えておくと便利です。なので、それぞれの使い方をマスターするようにしてください。

サブコンテンツ

このページの先頭へ