Google 検索結果上位で解決できない問題の解決方法

padding と margin の違いをわかりやすく解説

padding と margin の違いがわからない方のために、そのその違いをわかりやすく解説します。その答えは、ブロック要素同士の階層関係で決まります。

CSS で余白を指定するときに padding と margin のどちらを使えば良いのか…よくわかりません、、

padding と margin の使い分け方

余白を指定するブロック要素ともう一方のブロック要素との関係性によって padding と margin のいずれを使用するか…が決まります!

ブロック要素とブロック要素の階層関係が「親子関係」の場合

<div class='parent'><!--親ブロック-->
  ※10px の余白
  <div class='child'><!--子ブロック-->
    テキスト
  </div>
  ※10px の余白
</div>

この場合には .parent クラスに padding: 10px; で余白を作ります!

【理由】そうすることで、子ブロックの幅を “width: 100%;” などとシンプルに指定することができます(※子ブロックに margin を指定すると、サイズ調整が難解になってしまいます、、)

ブロック要素とブロック要素の階層関係が「同じ階層」の場合

<div class='friend1'><!--友達1ブロック-->
  テキスト
</div>
※10px の余白

<div class='friend2'><!--友達2ブロック-->
  テキスト
</div>

この場合には .friend2 クラスに margin-top: 10px; で余白を作ります!

【理由】友達1ブロックと友達2ブロックの間の余白を padding で指定することはできません、、

プログラミング相談受付中

自営エンジニア歴 20年以上の 当ブログ作者が、プログラミングに関するオンライン相談(zoom 等)を受付中です。言語は HTML CSS JavaScript jQuery PHP MySQL VBScript など…

詳細・お問い合わせはこちら