paddingとmarginを段ボールで例えてみました〜初学者の絞り出した知恵〜

はじめに

こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。今回は初学者が疑問に思う部分であるpaddingとmarginについてまとめてみました。

paddingとmarginとは？

HTMLの要素は「ボックスモデル」という仕様に基づいて構成されています。このボックスモデルには、以下の4つの要素が含まれます：content（コンテンツ）、padding（パディング）、border（ボーダー）、およびmargin（マージン）。

• content : 要素の中身（テキストや画像など）を表します
• padding : 要素の内側に設定される余白で、CSSプロパティpaddingを指定すると作成されます
• padding : コンテンツと境界線（border）の間に生まれるスペースです
• border : 要素の境界線を指し、CSSプロパティborderを使用して設定します。borderはpaddingの外側に存在し、枠線を表します
• margin : 要素の外側に設定される余白で、CSSプロパティmarginを指定すると作成されます。marginは他の要素との間隔を確保するためのスペースです

※paddingは英語で「詰め物」を意味し、marginは「余白」を意味します。

単語の定義については「現役エンジニア＆インフルエンサー　セイト先生が教えるプログラミング入門 (堀口 セイト)」の内容を一部参考にさせていただきました。

段ボールで例えると？

定義は理解したのですが、勉強し始めの頃はpaddingとmarginがごっちゃ混ぜになっておりました。そこで身近なものに例えたら分かりやすいと思い自分なりに例を作り、まとめてみました。
AさんとBさんと段ボールとAmazonが登場します。

[例]
AさんとBさんがいます。二人ともAmazonで買い物をしました。それぞれ段ボールが一箱ずつ届く予定です。
～marginとは？～
まず、トラックにAさんとBさんの段ボールが積まれました。Aさんの段ボールとBさんの段ボールの間には10センチの空間があります。この空間が"margin"です。つまり、要素（段ボール）同士の外側にあるスペースがmarginです。

～paddingとは？～
段ボールの中には、四角い箱に入った商品が入っています。この四角い箱と段ボールの内側の壁の間には20センチの隙間があります。これが"padding"です。つまり、要素の中でコンテンツ（四角い箱）とその境界線（段ボールの内側の壁）との間にあるスペースがpaddingです。

～borderとは？～
また、段ボール自体にも厚みがあります。この段ボールの厚さや外側に貼られたテープが"border"です。つまり、要素の外側の枠線部分を指します。段ボールがしっかりと中身を保護するように、要素のborderは見た目にアクセントをつけたり、要素を囲む役割を果たします。

まとめ

段ボールの厚さ → border
段ボールと中の四角い箱との間の空間 → padding
AさんとBさんの段ボールの間の空間 → margin

最後までご覧いただき本当にありがとうございました！！