こんちゃ！マイケルやっ！

今回は、「padding」(パッディング)と、「margin」(マージン)について説明してきたいと思います。
CSSにおいて、「padding」と、「margin」は基本中の基本の概念になります。
ちなみに、paddingは日本語で「詰め物」とか「埋め込む」という意味で、marginの方は「余白」とか「差」の意味らしいです。読み方は、パッティング、マージンでOK!

今さらすぎて聞けないpadding、marginのこと

私も普段あたり前のように使っています。
正直申しあげますと、『ここは、padding使えばいいや!』、『これだと、marginだぜ!』なんてことは、いちいち考えてません(ﾟｰﾟ;
しかし、時々、自分の思いどおりに「margin」が効かなかったりして、『あれれ..』と思うことがあります。

また、初心者の方にCSSを教えるときに『先輩ッ！paddingとmarginの違いって何すか？』って質問されたときに『内側余白と、外側余白やし』みたいなDQNな説明すると、塩対応にもなりかねません。

なので、今回はおさらいもかねて、「padding」と「margin」について詳しく説明させていただきます。

HTMLの基本的な構造のこと

まずは、図解で説明しますので、下の図をご覧ください。

図で分かるように、コンテンツのborder(ボーダー)をさかいに、内側の余白(padding)と外側の余白(margin)に分けられます。
このコンテンツの四角い領域をボックスモデルといいます。

ボックスモデルっていう聞きなれない単語出てきました。

HTMLのすべてのタグ要素で囲んだものは四角い領域で形成され、その領域のことをボックスモデルといいます。
これは、実際にタグ要素に背景色やボーダーをつけると分かりやすいです。

spanタグ要素の部分を背景色とボーダーを指定した例：

<p>ここは普通の文章です。<span>ここはspanタグ要素やで</span>ここは普通の文章です。</p>

ここは普通の文章です。ここはspanタグ要素やでここは普通の文章です。

こんな感じで、ちゃんと四角で形成されてます。

padding、marginの指定方法

次にpadding、marginを使う際の書き方です。

個別の場合

あと、個別じゃなくてまとめて書く方法あります。
これのこと「ショートハンド」っていいます。

ショートハンドの場合

marginの相殺(そうさい)とは

marginは縦方向（垂直方向）の時に限り、重なるmarginを相殺する性質があります。
数値が大きな方が適用されます。相殺は「消されてなくなるよ。」ってことです。

これはどういうことかというと、「margin-bottom:50px」を指定したボックスの下に
「margin-top:30px」を指定すると、50px + 30px = 80pxとなると思いきや、小さい値の方の「margin-top:30px」が消されてなくなり、そんで「margin-bottom:50px」方のみが適用されます。あと覚えてほしいのが、横方向（水平方向）には相殺されません。ご注意をば！

paddingで、幅や高さの値が変わってしまうorz

paddingは、marginのように相殺はありませんので、すぐに理解できると思いますが一つポイントがあります。widthやheightが決まった値を指定していえるタグ要素に、『内側余白がほしーから、paddingいれよっと』っと思って、paddingを指定すると、要素の幅や高さの大きさ自体が変わってしまいます。

なんのこった？パンナコッタ？っていう方は、以下をご覧ください。

まず、div要素に「width:400px」と、してみました。

そんで、見やすくしようと「padding:30px」を入れてみます。

上のと比べると、あきらかに横幅や高さが変わりました。

paddingは、よく「脂肪」という風に例えられます。paddingが増えると、脂肪でぶくぶく太っていくイメージです。

なので、はじめの幅よりも大きくなっちゃうんです。
こういう時は、要素の幅を400pxのままにする為に、paddingで増えた値の分をwidthの値から引けばOKです。

つまり、paddingで左右の幅があわせて60px増えたので、400px – 60px = 340pxになります。そうすると以下ように、最初の幅と同じになります。

ちなみに、paddingの「脂肪」に対して、marginは、物と物との「距離」として例えられます。

最後に

marginには、他にネガティブマージンっていう理解しにくい効果があるのですが、それはまた次回書きたいと思います。

marginはpaddingって、ただの外側余白、内側余白っていうな感じなんですが、私が初心者の頃は、実際使ってみると『あれ、なんでだろう』と、いろいろとつまずきいた事も多々ありました。
でも、使い続けているとなんとなく分かってきて、こうすればいいのかっていうのが分かってきます。分からないことがあっても、あきらめないで、とりあえず保留にしておいて次に進めば大丈夫です。やっていくうちに、いつの間にか理解してます！

でわ！今回はこれにて失礼いたします！
読んでいただきありがとうございました！