今回は【CSS】paddingプロパティでの指定方法を学ぼう!
についての解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
padding
の使い方について学びたい方へ - 今回はpaddingの指定方法についての記事になります
上の図のように、padding
プロパティを指定し要素のボックスに余白をつけています。
「paddingの指定あり」の方が、読みやすくなります。
要素のボックスモデルについて
ボックスモデルとは要素のもつ領域になります。
- 各領域の解説
- 要素の内容
要素の内容が表示される領域になります。
widthやheightプロパティでのサイズ指定が可能です
- padding(パディング)
要素の内側の余白を取るための領域になります。
paddingプロパティでの指定が可能です
- border(ボーダー)
要素の枠線になります。
border-widthプロパティでのサイズ指定が可能です
- margin(マージン)
外側の余白の領域になります。
marginプロパティでのサイズ指定が可能です
- marginとpaddingの違い
margin
要素の外側の余白
解説記事ありますpadding
要素の内側の余白
今回はココを解説します
ポイント!
ボックスモデルとは4つの領域で構成されることになります。
CSSでレイアウトをする際には、ボックスモデルを理解しておきましょう!
paddingについて
padding
プロパティは、要素の内側の余白を指定します。
paddingプロパティはそれぞれ上「-top」、右「-right」、下「-bottom」、左「-left」の余白を指定することが
できます。
/*--上の余白 「-top」--*/
padding-top: 値;
/*--右の余白 「-right」--*/
padding-right: 値;
/*--下の余白 「-bottom」--*/
padding-bottom: 値;
/*--左の余白 「-left」--*/
padding-left: 値;
padding指定方法
ホームページ制作、ロゴ制作など、
デザインをする際には配色は欠かせない要素の
1つになってきますよね。
<div class="area">
<p>ホームページ制作、ロゴ制作など、
デザインをする際には配色は欠かせない要素の
1つになってきますよね。</p>
</div>
.child02 {
/*--padding、背景色以外 省略--*/
background-color: #FFBF4B;
padding-top: 30px;
padding-left: 30px;
padding-bottom: 30px;
padding-right: 30px;
}
上下左右に30pxを指定しています。
ですが、毎回「top、bottom、left、right」を指定するの面倒ですよね。そこでショートハンドを使用します。
ショートハンドプロパティで一括指定
padding
プロパティは、上下左右の4方向をまとめて指定できます。
ショートハンドプロパティで一括指定は主に4パターンに分けられます。
4方向まとめて指定
値を1つ指定:
上右下左の4方向が同じ値が適用されます。
/*--上右下左--*/
padding: 20px;
/*--
内訳
padding-top: 20px
padding-right: 20px
padding-bottom: 20px
padding-left: 20px
--*/
上下と左右を指定
値を2つ指定:
1つ目の値が上下、2つ目の値が左右に適用されます。
/*--1つ目の値が上下、2つ目の値が左右-*/
padding: 20px 10px;
/*--
内訳
padding-top: 20px
padding-right: 10px
padding-bottom: 20px
padding-left: 10px
--*/
上、左右、下を指定
値を3つ指定:
1つ目の値が上、2つ目の値が左右、3つ目の値が下に適用されます。
/*--1つ目の値が上、2つ目の値が左右、3つ目の値が下-*/
padding: 20px 10px 30px;
/*--
内訳
padding-top: 20px
padding-right: 10px
padding-bottom: 30px
padding-left: 10px
--*/
上、右、下、左を指定
値を4つ指定:
時計回りのように上、右、下、左の順で適用されます。
/*--上、右、下、左の順番-*/
padding: 20px 10px 30px 40px;
/*--
内訳
padding-top: 20px
padding-right: 10px
padding-bottom: 30px
padding-left: 40px
--*/
ポイント!
ショートハンドで指定する際には半角スペースで区切るようにしましょう!
paddingの指定できる値について
これまでpaddingの指定は「px」でおこないましたが、「%」といった単位も指定できます。
- 指定できる値
- 数値と単位
○○pxのように数値と単位で余白を指定できます
- %
親要素のブロックに対する割合を%で指定できます
見出しにpaddingを指定する
見出しに、背景色やボーダーを指定することはよくあります。
適用前:文字に対して、背景色、ボーダーに余白がなく読みにくですよね。
適用後:文字に対して、背景色、ボーダーに余白があり読みやすいですよね。
見出しにpadding
paddingプロパティでの指定方法を学ぼう!
<h3>paddingプロパティでの指定方法を学ぼう!</h3>
h3 {
/*--padding以外 省略--*/
padding: 30px;
/*--
内訳
padding-top: 30px
padding-right: 30px
padding-bottom: 30px
padding-left: 30px
--*/
}
テーブルにpaddingを指定する
テーブルには必ずpaddingを指定しましょう。
適用前:見出し、セル内のテキストに余白がなく読みにくですよね。
適用後:見出し、セル内のテキストに余白があり読みやすいですよね。
<table>
<tbody>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<!--省略-->
</tbody>
</table>
table th,
table td {
padding: 20px 0;
/*--
内訳
padding-top: 20px
padding-right: 0px
padding-bottom: 20px
padding-left: 0px
--*/
}
%での指定方法
親要素のブロックに対する割合を%で指定できます。
例:親要素の横幅が1000pxのときに、要素の内容を60%=600pxになり、
padding10%=100pxになります。またmarginを10%にすると、余白は100pxになります。
paddingでは相殺は
以前の記事「【CSS】marginが効かない!marginの相殺とは」について解説しましたが、相殺の現象が起こるのはmarginだけです。paddingに関しては相殺の現象は起こりません。
また、paddingとmargin間でも相殺は起こりません。
まとめ
今回はこれで以上です。
marginに関する記事
marginには「marginの相殺」という現象があります。
margin・paddingが効かない原因はブロック要素とインライン要素にあります。
- POINT
- 文章、コンテンツには余白が必ず必要になってきます。
- ボックスモデルとは4つの領域で構成されることになります。
-
margin
要素の外側の余白になります。 -
padding
要素の内側の余白になります。 - ショートハンドで指定する際には半角スペースで区切るようにしましょう。
- paddingに関しては相殺の現象は起こりません。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事