padding / margin の違いは … ２ブロック間の階層関係で決まります。具体的には、ブロック要素とブロック要素の階層関係が親子関係か？同一階層か？で判断します。
CSS で余白を指定するときに padding と margin のどちらを使えば良いのか…よくわかりません、、
目次
padding / margin て何？
ボックスモデル
CSS には「ボックスモデル」という概念があり、div タグで長方形の領域を定義した場合、その枠線として border を書いた場合（細かく見ていくと）それらは内側から 内容領域（content） – パディング領域（padding） – ボーダー領域（border） – マージン領域（margin）と定義されています。
ボックスモデルの落とし穴
では、１つのブロック要素の内側に別の小さなブロック要素を作った場合 … それらの間の余白を定義するには padding と margin のどちらを使えば良いでしょう？
内側のブロックから見れば margin を定義すれば良さそうです。
外側のブロックから見れば padding でも定義できそうです…
実はここにボックスモデルの落とし穴があります。
どちらでも定義できてしまうのです。そして、あまりこだわりなく使っていくと…（特に初心者の方にとっては）混乱が混乱を呼び … 「余白がうまく作れなくない、、(涙)」と嘆いてしまうことになると思います。。（僕の生徒さんがそのようになってしまったのです、、）
padding と margin を正しく使い分けるには？
padding と margin を正しく使い分けるには、余白を指定したいブロック要素ともう一つのブロック要素との階層関係から padding / margin を決定します…
ブロック要素とブロック要素の階層関係が「親子関係」の場合
<div class='parent'><!--親ブロック-->
※10px の余白
<div class='child'><!--子ブロック-->
テキスト
</div>
※10px の余白
</div>
この場合には .parent クラスに padding: 10px; で余白を作ります！
【理由】そうすることで、子ブロックの幅を指定するときも “width: 100%;” など シンプルに指定することができます（※子ブロックに margin を指定すると、幅や高さの指定に （最悪の場合）calc 関数を使わなくてはいけなくなり… CSS が複雑化します、、※子ブロックに margin を指定してはいけない訳ではありません）
ブロック要素とブロック要素の階層関係が「同じ階層」の場合
<div class='friend1'><!--友達1ブロック-->
テキスト
</div>
※10px の余白
<div class='friend2'><!--友達2ブロック-->
テキスト
</div>
この場合には .friend2 クラスに margin-top: 10px; で余白を作ります！
【理由】友達1ブロックと友達2ブロックの間の余白を padding で指定することはできません、、
例.
例えば、スマホのホーム画面に保存された１つのアイコン”Ａ”とその中に書かれたイラストまでの余白は “padding” で指定します。アイコン”A”と その隣のアイコン”B”との距離は “margin” で指定します。
プログラミング～独学の仕方
筆者は、中学一年のときにポケットコンピュータでプログラミングをはじめて以来、プログラミングを教わったことは一度もなく…26歳でフリーランスプログラマーになって以来、20年以上経った今も 現役の Web エンジニアとして活動を続けています。
独学の仕方について…なにかの参考になれば。
SNS開発18年で2つのSNSを開発・運用中の当社が、あなたのアイデアを形にするお手伝いをします。
