お問い合わせ
  • HTML

33 枠線の内側に余白を作るpaddingプロパティ

paddingプロパティ

これまでに作ったサンプルでは、h1要素の枠線と内側にあるテキストがくっついて表示されているはずです。paddingプロパティを使用すると、枠線とテキストの間に余白を作って間隔を空ける事が出来ます。内側の余白の事をパディングと言います。
パディングの値の指定には「px」や「%」が使えますが、ここでは基本の「px」を使って説明していきます。

paddingプロパティ1

たとえば、h1要素を5pxの枠線で囲んで、その枠線とテキストの間隔を30pxにする場合は以下のように記述します。

paddingプロパティ2

HTMLファイルを上書き保存してブラウザで開くと、h1要素の枠線とテキストの上下左右の間隔が30px分空いて表示されます。

paddingプロパティ3

ここまでは分かりやすいように枠線を表示して説明してきましたが、枠線が目に見えてなくても、要素の回りには太さが0pxの枠線が存在しているので、枠線を表示させずにpaddingを設定しても、ちゃんとpaddingは反映されています。

上下左右でパディングの指定を変える

上下左右で個別にパディングを指定する場合は、

  • padding-topプロパティ(上)
  • padding-rightプロパティ(右)
  • padding-bottomプロパティ(下)
  • padding-leftプロパティ(左)

を使用します。各プロパティで使用出来る値は、paddingプロパティと同じです。

このページのまとめ

  • paddingプロパティを使用すると、枠線とその中にある要素の間隔を空けることが出来る。
  • 値の指定には、「px」や「%」を使用するが、基本的には「px」を使って指定する。
  • 枠線は必ずしも表示されている必要は無く、見えなくてもパディングの指定はちゃんと反映されている。

Contact Us

Web制作、Webマーケティング、SFA・MA導入支援に関するお悩みがある方は、お気軽にご相談ください。

お問い合わせ・ご相談

ホームページ制作、マーケティングにおける
ご相談はお気軽にご連絡ください。

資料請求

会社案内や制作事例についての資料を
ご希望の方はこちらから。

お電話でのお問い合わせ

お電話でのご相談も受け付けております。

※コールセンターに繋がりますが、営業時間内は即日
担当より折り返しご連絡をさせて頂きます。