はじめに
プログラミング学習をはじめて多くの人が最初につまずくであろう箇所が「marginとpaddingの違い」だと思います。
自分もプログラミング学習当初は、
「h1, h2タグ余裕や！！」
「imgタグを使えば画像が配置できるのか！簡単簡単」
「floatを使えば要素を横並びにできるのか！」
と「プログラミング余裕やっ！」と調子に乗っていた矢先に「marginとpadding」が登場し苦しみました。
一般的な解説では「要素の外側に余白を取りたいときはmargin、内側に余白を取りたい時はpadding」という説明されていましたが、当時の自分にはこれだけでは全く理解できませんでした。
そもそも「要素の内側と外側ってなんやねん」と何度思ったことやら...
またTwitterを眺めていると自分だけでなく、多くの初学者が「marginとpaddingの違い」を苦しんでいました。
今回はそんな初学者の敵である「marginとpaddingの違い」について例えを用いて解説をします。
この記事の対象者
- プログラミング初心者
- marginとpaddingの違いがあやふやな人
- marginとpaddingの違いを後輩に説明する時に苦戦している人
この記事の目標
- marginとpaddingの違いをイメージで理解できるようになる
それでは早速、例えを用いた解説をします。
コロナ期にまつわる例え
「コロナ期で自粛が増えた結果、体はpaddingが増え、周りの人とはmarginが増えた」
自分自身も後輩にpaddingとmarginの違いを説明する際はこの例えで説明をしています。
コロナ期で自粛が増えた結果、体はpaddingが増えた
まずは前半部分の「コロナ期で自粛が増えた結果、体はpaddingが増えた」のイメージを紹介します。
今回は体脂肪をpaddingと比喩していますが「自分の体の内側の領域(余白)が増える」というイメージです。
コロナ期で、周りの人とはmarginが増えた
これに関しては「ソーシャルディスタンス」という言葉がすべでを表します。
これはイメージはしやすいかと思います。
「自分の外側の領域(余白)が増えている」といったイメージです。
最後に
いかがだったでしょうか。
今回はmarginとpaddingの違いをコロナ期だからこそ使える例えを利用して解説をしました。
marginとpaddingの違いについては使っていく内に徐々に理解できるものでもあるので、今回紹介したイメージを持ちながら実際に使ってみて理解を深めていただければと思います。
他にもいろいろな記事を出しているので合わせて読んでいただけると嬉しいです。