今日は、コーディング初心者の方が混乱しがちなmarginとpaddingの違いについてお話させていただきます。

marginとpaddingの違い

marginとpaddingの違いというのは、結論から言ってしまうと、

padding：　内側の余白
margin：　外側の余白

ということです。

すべてのHTMLの要素はボックスと言われる四角形の領域を持っています。四角形の四辺には、borderという境界線があります。その境界線の外側に余白を設けたいときは「margin」境界線の「内側」に余白を設けたいときは「padding」を指定します。

具体例でお話していきます。例えば、ここに数字の入ったdiv要素が横に並んでいたとします。

ここに境界線を引いてみます。

はい、黒い境界線（border）ができました。
この境界線の外側、つまりボックス同士の間に余白を設けたいときはmarginを設定します。
実際に、marginを設定して余白を入れてみましょう。

marginによってボックス同士の間隔が空きました。今後は、ボックス内の数字がborder（境界線）に近づきすぎているので、数字と境界線の間に余白を設けたいと思います。内側の余白はpaddingを設定するんでしたね。

これで、文字が詰まった感じがなくなりましたね。
最後に図解で見てみましょう。

このようにボックスの境界線とその周りの余白の構造のことをボックスモデルと言います。コーディングをするで、marginとpaddingを使わない日はないと思います。今のうちにしっかりと覚えてしまいましょうね。