内側の余白を作るpaddingの使い方と設定方法【CSS】

チャッピー

隣同士の距離を空けたい時はどうしたらいいの？

こばゆた

paddingやmarginという聞きなれないプロパティを使うことで隣同士の距離を開けることができるんだよ！

こばゆた

最初はどちらがpaddingでmarginだったかすら悩むかもしれませんが、やっていくうちにわかっていきます。

最初は嘘だと思っていましたが本当でしたwww

1.余白とは

pタグやhタグを使用してテキストを書くと視力が8.0あっても見えない箱が作られます。

この箱を積み上げたり横に並べたりすることでデザインを作っていくのが基本になります。

ボックスは上の図のような形になっており、borderとは文字通り境界線のことでborderから内側の余白をpaddingプロパティ、borderの外側の余白をmarginプロパティと呼びます。

こばゆた

padは詰め物という意味なので「paddingは内側」という風に覚えるのが良いかもしれません

またborderについてはコチラ

境界線を作るborderプロパティの詳しい使い方【CSS】

borderは文字通り境界線を意味し、それを境にmargin、paddingといった余白が決まります。今回はそのborderプロパティの詳しい使い方を解説しています。

kbyt-programming.com

2021年12月02日

2.paddingの基本

paddingは内側の余白ということですが理解しづらいと思いますので例を示すと以下のようになります。

わかりやすさのため枠(border)を付けてありますが、paddingを付けると文字から枠までの余白が広がったのがわかると思います。

これがborderの内側の余白を設定するpaddingです。

2-1.paddingの使い方

次は実際の使い方です。

セレクターを指定しpaddingプロパティと値を選択します。

セレクター{
  padding: 値;
}

<p>こんにちは</p>

p{
  padding: 20px; /* paddingを20px */
  width: 250px; /*p要素の幅を250px*/
  background-color: pink; /*p要素の背景色をピンク*/
}

paddingを設定すると何が起きているかを先ほどの箱の例に戻って考えてみましょう

今回paddingを20pxに設定したので下の図のようにテキストから全方向に余白が作られたということになります。

また右側の余白については分かりづらいですがきちんと存在しています。

これがpaddingの基本的な考え方になります。

2-2.paddingの値の設定の仕方

値を2つ

今度は値を2つ設定にしてみます。

paddingを20px 40pxに設定しました。

p{
  padding: 20px 40px;
}

値を2つ設定するとどうなったでしょうか？

上下と微妙な差ですが左右別々の値の余白が作られたことがわかります。

こちらも箱の例で見てみます。

このように値を2つ設定すると上下と左右の値が指定されていることがわかります。

値を3つ

次はpaddingの値を20px 40px 50pxに設定しました。

この辺りから少し混乱してくるかもしれません…www

p{
  padding: 20px 40px 50px;
}

今度は新しく設定した50pxが下方向に設定されました。

このように3つ値を設定すると上、左右、下の順で値を設定することができます。

箱の例で見てみるとこんな感じで余白ができています。

値を4つ

最後はpaddingを20px 40px 50px 60pxに設定しました。

p{
  padding: 20px 40px 50px 60px;
}

勘の良い方ならわかるかもしれませんが今度は左側に余白が設定されるわけですね。

箱の例で見てみるとこんな感じで余白ができています。

まとめると以下の表のようになります。

このようにまとめて指定する書き方をショートハンドといいます。

2-3.個別で指定する

paddingを設定する際は方向を指定して個別で指定することもできます。

p{
  padding-bottom: 50px;
}

paddingを下方向に指定(bottomを指定)しているので下のみに余白を設定することになります。

もちろんtop,right,leftもそれぞれ個別で指定することもできます。

p{
  padding-top: 50px;
}

p{
  padding-right: 50px;
}

p{
  padding-left: 50px;
}

p{
  padding-bottom: 50px;
}

こばゆた

ここまで見てきてどちらで指定すれば良いか迷ってきた方もいるかもしれませんが、書き方は違えど結果は同じになりますのでまずは両方試してみて、わかりやすい方、または状況に応じて書くのが最初は良いと思います。

p{
  padding: 20px 30px 40px 50px;
}

p{
  padding-top: 20px;
  padding-right: 30px;
  padding-bottom: 40px;
  padding-left: 50px;
}

こばゆた

状況に応じて使い分けるので両方の書き方を押さえておきましょう。

実際テキストに対してpaddingをどのくらい取るのが良いかというところですが文字サイズの１〜1.5倍くらいがちょうど良いといわれています。

ここではfont-sizeを18pxに設定しています。

文字サイズの2倍

こんにちは！
今日はいい天気ですね。

p{
  padding: 36px;
}

こばゆた

文字サイズの2倍のpaddingを設定しました。ちょっとでか過ぎる印象です。

文字サイズの半分

こんにちは！
今日はいい天気ですね。

p{
  padding: 9px;
}

こばゆた

文字サイズの半分のpaddingを設定。少し窮屈ですね。

文字サイズの1.5倍

こんにちは！
今日はいい天気ですね。

p{
  padding: 27px;
}

こばゆた

文字サイズの1.5倍のpaddingを設定しました。バランスが取れたと思います。

3.値の単位

今まではpxで値を指定してきましたが、font-sizeの時同様にpx以外にも%,em,remを単位として使うことが出来ます。

font-sizeで文字の大きさを指定し、remやemといった単位をつける【CSS】

文字の大きさを変えるにはfont-sizeプロパティというものがあり、値に付ける単位にもpx,em,remといったものがあります。この記事ではそれらの単位も解説しております。

kbyt-programming.com

2021年12月02日

考え方はfont-sizeの時と同じですが簡単に見ていきます。

3-1.%

<div>
  <p>こんにちは</p>
</div>

div{
  width: 250px;
}

p{
  padding: 10%;
}

%は親要素のサイズを元にされるので親要素のdivのwidth250pxの10%ということで25pxのpaddingが設定されます。

3-2. em

emは親要素のfont-sizeを基準にしていました。

<div>
  <p>こんにちは</p>
</div>

div{
  font-size: 18px;
}

p{
  padding: 1em;
}

ここではpの親要素のdivの18px×1emで18pxのpaddingが設定されます。

3-3. rem

remはルートのfont-sizeを基準にしていました。

<div>
  <p>こんにちは</p>
</div>

div{
  font-size: 18px;
}

p{
  padding: 1rem;
}

なのでここでは親要素の font-sizeは無視してルートのfont-size(デフォルトだと16px)から計算をするので16pxのpaddingが設定されます。

4.まとめ

セレクター{
  padding: 値;
}

/* 個別指定 */
セレクター{
  padding-○○: ××px；/* ○○にはtopやleftなど方向が入る */
}
/* 複数の方向を指定することもできる */

/* ショートハンド */
セレクター{
  padding: ××px △△px；
}
/* 指定する数によって時計回りに増えていく */