パディング(padding)の使い方まとめ【CSS】

s36
padding(余白)の使い方

ブログのカスタムやweb制作で、めっちゃ良く使うcssのパディング(padding)の使い方と書き方の紹介です!

パディング(padding)マージン(margin)ってけっこう混同しちゃいますよねw

でも違うところってボーダー(枠線)の内側の余白か外側の余白かっていうだけなんです。(パディングはボーダーの内側の余白) そしてパディングはマージンのように、くせがないのですごい使いやすい

web制作やブログカスタマイズで必ず使うプロパティなので、書き方だけでも覚えておくと作業がすっごい楽になりますよ(^-^) では、パディングの書き方や位置について紹介してきますね。

目次
パディング(padding)の書き方
ボックスモデルでのパディングの位置
ページ全体のパディングの動き
ページのパディングとマージンの設定方法

パディング(padding)の設定方法

パディングは以下のプロパティを使って設定します。

paddingプロパティ 意味
padding 上下左右のパディングをまとめて指定
padding-top 上のパディングを指定
padding-bottom 下のパディングを指定
padding-left 左のパディングを指定
padding-right 右のパディングを指定

マージンと同じでパディングは半角スペースで区切る事で、上下左右の値をそれぞれ指定する事ができます。

例として5pxの倍数を使ってますが、何pxでも大丈夫。もちろんpx以外の単位でもokです。

使い方 意味
padding:5px; 「上下左右」のパディングが5pxとなる
padding:5px 10px; 「上下」が5px、「左右」が10pxのパディングとなる
padding:5px 10px 15px; 「上」が5px、「左右」が10px、「下」が15pxのパディングとなる
padding:5px 10px 15px 20px; 「上」が5px、「右」が10px、「下」が15px、「左」が20pxのパディングとなる

パディングを設定する時の値

パディングの設定は、マージンの時と同じで単位付きの値(pxなど)、もしくはパーセンテージ(%)を使うことができます。

パーセンテージ(%)の使い方はマージンで使う時と同じで、ボックスのサイズに対するパーセンテージで指定することができます。 例えば「10%」と指定場合は、ボックスの縦、または横、もしくは両方向のサイズに対して10%の割合でパディングが設定されます。

.example{padding:10% 15% 20% 25%;}

ちなみにパディングには「auto」を設定することはできないので注意!

パディング(padding)の書き方

p{padding-top:10px;}
/*上のパディングが10px*/
 
p{padding-bottom:10px;}
/*下のパディングが10px*/
 
p{padding-left:10px;}
/*左のパディングが10px*/
 
p{padding-right:10px;}
/*右のパディングが10px*/
 
p{padding:10px;}
/*上下左右のパディングが10px*/
 
p{padding:5px 10px;}
/*上下が5px、左右が10pxのパディングになる*/
 
p{padding:5px 10px 15px;}
/*上が5px、左右が10px、下が15pxのパディングになる*/
 
p{padding:5px 10px 15px 20px;}
/*上が5px、右が10px、下が15px、左が15pxのパディングになる*/

では、パディングを実際ブラウザに表示すると、どうなるのか見てみましょう! 変化をわかりやすくするために、背景(background)をオレンジにします。

p{background:#f9cc9d;}
p{margin:20px 0;}
 
p.example{padding:10px;}
p.example2{padding:5px 20px;}
p.example3{padding:5px 20px 30px;}
p.example4{padding:15px 25px 35px 45px;}
<p class="example">パディング10px</p>
<p class="example2">上下5px、左右20pxのパディング</p>
<p class="example3">上5px、左右20px、下30pxのパディング</p>
<p class="example4">上15px、右25px、下35px、左45pxのパディング</p>
ブラウザ上のパディング表示例

パディング10px

上下5px、左右20pxのパディング

上5px、左右20px、下30pxのパディング

上15px、右25px、下35px、左45pxのパディング

ボックスモデルでのパディングの位置

ボックスモデルでのパディングの位置 パディングの実際の表示位置

※ボックスモデルについては「cssのボックスモデルについて」で詳しく紹介しています。

見てもらえばわかるように、パディングはボーダーの内側の余白部分になります。

最初にも紹介しましたが、パディングの各位置は下のように指定できます。

上はpadding-top、下はpadding-bottom 右はpadding-right、左はpadding-leftとなります。

最初の内は「パディングとマージン、どっち使えばいいんだっけな?」ってなると思います。 なので、とりあえずパディングはボーダーの内側の余白、マージンは外側の余白とだけ覚えておいて下さい。 これだけで十分です。

ちなみにボーダー(border)を表示する時は、ボーダーの幅が追加されるので覚えておいて下さいね。

ボーダー表示時のボックス周りの幅=マージンの幅+パディングの幅+ボーダーの幅

ページ全体のパディングの動き

paddingの動き(例)

上のような画像の時に「なんでページの右端と下部に隙間が空いてるんだろう??」って思ったことないですか? これは、ページが表示される領域が、ブラウザの表示サイズに依存しているためです。

例えば、ページ全体のパディングを0にします。 その場合、ページ内の要素(bodyなど)の大きさよりもブラウザの画面を大きく表示した場合は、自動的にパディングが設定されています。 ページの左端と上部のパディングは0になってますが、画面の左端と下部の部分には自動的にパディングが入っています。 そのため画面全体にページが引き伸ばされて表示されているということです。

自動でpaddingが入っている(例)

つまり、設定上は0だけど実は右端と下部にはパディングが自動で入っているから、隙間が空いてたんだよ!ってことです。

イマイチいってる意味が分かんなくても、ちょっとマニアックな部分なんで気にしないで下さいね(^^♪

ページのパディングとマージンの設定方法

webページの全体は、body要素のボックスとして扱われています。 なのでwebページを何にもいじってない場合、つまりcssでスタイルをなにも設定していない場合はブラウザの画面とボックスの間に小さい余白が表示されます。

初期状態のページのpadding(小さな余白) 初期状態のページのpadding2(小さな余白)

この余白を消すためには、webページのパディングとマージンを0に設定する必要があります。

こういう場合body要素を指定してあげる事で、設定したcssのスタイルがページ全体に反映されるようになります。 といっても、書き方は簡単です。下をコピペすればok!

body{
  margin: 0;
  padding: 0;
}

こうするとwebページの端の余白がなくなってくれます!! こんな感じで、すごい簡単なのでブログやwebページの端の余白が気になるって時は試してみて下さいね。

最初の内はどーしても「マージンとパディングどっち使えばいいの?」ってなっちゃいます。 なので、とりあえず「パディングはボーダーの内側の余白」とだけ覚えておいてくださいね。 あとパディングは、必ず使うので書き方を覚えておくと楽ですよー(^-^)

以上、パディング(padding)の使い方でしたー(^^♪ では、またー