難波校OPEN記念入学金無料キャンペーン実施中!
DMM WEBCAMPは難波校の開校を記念して、通常100,000円(税抜)無料で入校できるキャンペーンを実施しています。
関西未経験からエンジニアになりたいプログラミングで人生を変えたい方はこの機会にぜひご検討ください!

みなさんはCSSの学習をしていませんか?

CSSを学習する時に「padding」が使えることは基本となっています。

今回の記事ではpaddingの使い方を解説します!

オブジェクト領域内の余白を設定する

paddingはCSSのプロパティであり、paddingプロパティではパディングに関する指定を上下左右まとめて行うことができます。

指定方法


padding: [上余白][右余白][下余白][左余白]

値指定のルール

上下左右を異なるパディング幅にしたい場合には、スペースで区切って複数の値を指定します。値の指定数によって以下のように自動で判定されます。

値を1つ指定した場合:指定した値が[上下左右]すべてのパディングになります。
値を2つ指定した場合:記述した順に[上下][左右]のパディングになります。
値を3つ指定した場合:記述した順に[上][左右][下]のパディングになります。
値を4つ指定した場合:記述した順に[上][右][下][左]のパディングになります。

尚、マージンとは異なり、パディングに負の値を指定することはできませんので注意が必要です。

個別指定

paddingには各方向で個別プロパティが用意されていますのでそちらでも同様の指定が可能です。

padding-top(上余白)
padding-bottom(下余白)
padding-left(左余白)
padding-right(右余白)

paddingとmargin

paddingはborderで指定された境界とその中のコンテンツの間の余白を設定するプロパティです。対して、marginがborderの外側の余白になっています。

余白を空けるという意味では、結果同じようなレイアウトを形成することも可能ですが、意味合いが異なるもののため、動作をしっかり理解して適所で双方とも使用してください。

サンプル


<!DOCTYPE html>
<html>
<head>
<title>padding</title>
<style type="text/css">
p.sample1 {background-color: #ccc; padding: 10px;}
p.sample2 {background-color: #ccc; margin: 30px; padding: 10px;}
p.sample3 {background-color: #ccc; padding: 10px 20px;}
p.sample4 {background-color: #ccc; padding: 10px 20px 30px;}
p.sample5 {background-color: #ccc; padding: 10px 20px 30px 40px;}</style>
</head>
<body>
<hr />
<p class="sample1">
上下左右にまとめて10pxのパディングを指定
</p>
<hr />
<p class="sample2">
上下左右にまとめて30pxのマージンと、10pxのパディングを指定
</p>
<hr />
<p class="sample3">
上下10px、左右20pxのパディングを指定
</p>
<hr />
<p class="sample4">
上10px、左右20px、下30pxのパディングを指定
</p>
<hr />
<p class="sample5">
上10px、右20px、下30px、左40pxのパディングを指定
</p><hr />
</body>
</html>

まとめ

初心者の方向けにpaddingを紹介していきましたが、いかがでしたか?

paddingを上手に使いこなせることはWebサイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね!

1ヶ月でHTML・CSSができる!「WebCamp」とは?

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です!

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです!

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください!

5月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
4月受入枠は満員となっております。5月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい

上記にあてはまる方は、ぜひご検討ください!


▼未経験から1ヶ月でWEBデザイン・プログラミングを学びたい方はこちら!

おすすめの記事