パディング（padding）の使い方まとめ

ブログのカスタムやweb制作で、めっちゃ良く使うcssのパディング（padding）の使い方と書き方の紹介です！
パディング（padding）とマージン（margin）ってけっこう混同しちゃいますよねｗ
でも違うところってボーダー（枠線）の内側の余白か外側の余白かっていうだけなんです。（パディングはボーダーの内側の余白）そしてパディングはマージンのように、くせがないのですごい使いやすい。
web制作やブログカスタマイズで必ず使うプロパティなので、書き方だけでも覚えておくと作業がすっごい楽になりますよ(^-^) では、パディングの書き方や位置について紹介してきますね。

パディング（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）の書き方

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

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

見てもらえばわかるように、パディングはボーダーの内側の余白部分になります。
最初にも紹介しましたが、パディングの各位置は下のように指定できます。
上はpadding-top、下はpadding-bottom、右はpadding-right、左はpadding-leftとなります。
最初の内は「パディングとマージン、どっち使えばいいんだっけな？」ってなると思います。なので、とりあえずパディングはボーダーの内側の余白、マージンは外側の余白とだけ覚えておいて下さい。これだけで十分です。
ちなみにボーダー（border）を表示する時は、ボーダーの幅が追加されるので覚えておいて下さいね。

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

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

上のような画像の時に「なんでページの右端と下部に隙間が空いてるんだろう？？」って思ったことないですか？これは、ページが表示される領域が、ブラウザの表示サイズに依存しているためです。
例えば、ページ全体のパディングを0にします。その場合、ページ内の要素（bodyなど）の大きさよりもブラウザの画面を大きく表示した場合は、自動的にパディングが設定されています。ページの左端と上部のパディングは0になってますが、画面の左端と下部の部分には自動的にパディングが入っています。そのため画面全体にページが引き伸ばされて表示されているということです。

つまり、設定上は0だけど実は右端と下部にはパディングが自動で入っているから、隙間が空いてたんだよ！ってことです。
イマイチいってる意味が分かんなくても、ちょっとマニアックな部分なんで気にしないで下さいね(^^♪

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

webページの全体は、body要素のボックスとして扱われています。なのでwebページを何にもいじってない場合、つまりcssでスタイルをなにも設定していない場合は

ブラウザの画面とボックスの間に小さい余白が表示されます。

この余白を消すためには、 webページのパディングとマージンを0に設定する必要があります。
こういう場合body要素を指定してあげる事で、設定したcssのスタイルがページ全体に反映されるようになります。といっても、書き方は簡単です。下をコピペすればok！

css
body{
margin: 0;
padding: 0;
}

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

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