Perl Web開発者のHTML・CSS入門

padding - パディングを設定する - CSS入門【CSS3対応】

パディングを設定するにはpaddingをスタイルシート(CSS)で設定します。パディングとは、ブロックの内側にできる間隔のことです。

<div style="padding:10px;background:#eef">
  パディングを設定
</div>
<br>
<div style="background:#eef">
  パディングなし
</div>

パディングがブロックの内側にできる間隔、マージンがブロックの外側にできる間隔、です。

パディングの効果

パディングの効果は、適切な間隔を作ることで、文字を読みやすくすることです。

上、右、下、左のそれぞれにパディングを設定

上、右、下、左のそれぞれにパディングを設定できます。設定する順番は、上、右、下、左の順です。

<div style="padding:10px 20px 30px 40px;background:#eef">
  パディングを上、右、下、左のそれぞれに設定
</div>

上下、左右のそれぞれにパディングを設定

上下、左右のそれぞれにパディングを設定できます。設定する順番は、上下、左右の順です。

<div style="padding:10px 30px;background:#eef">
  パディングを上下、左右のそれぞれに設定
</div>

上だけ、右だけ、下だけ、左だけにパディングを設定

「padding-top」「padding-right」「padding-bottom」「padding-left」を使うと上だけ、右だけ、下だけ、左だけにパディングを設定することができます。

<div style="padding-top:10px;background:#eef">
  パディングを上だけ設定
</div>
<br>
<div style="padding-right:10px;background:#eef;text-align:right;">
  パディングを右だけ設定(テキスト右寄せ)
</div>
<br>
<div style="padding-bottom:10px;background:#eef">
  パディングを下だけ設定
</div>
<br>
<div style="padding-left:10px;background:#eef">
  パディングを左だけ設定
</div>

文字の縦位置をちょうど真ん中にするには?

文字の縦位置をちょうど真ん中にするには、上パディングをわずかに増やします。デフォルトは、フォントのベースラインが、基準になるので、日本語の場合は、やや上が狭いのです。フォントによって、微妙に異なるので、全ブラウザで、統一することは難しいですが、なるべくちょうど真ん中に合わせてみましょう。

微妙な差が見えるでしょうか?

<div style="padding:11px 20px 10px 20px;background:#eef">
  文字の縦位置をちょうど真ん中にする
</div>
<br>
<div style="padding:10px 20px 10px 20px;background:#eef">
  デフォルトは、フォントのベースラインが、基準になるので、やや上が狭い
</div>