HTML, CSS

padding / margin が効かないときは…2ブロック間の関係性を再確認

padding / margin が効かないときは、2ブロック間の関係性を再確認します。
具体的には、ブロック要素とブロック要素の階層関係が親子関係?か同一階層か?で決定します…

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

padding と margin を使い分ける

padding と margin を正しく使い分けるには、余白を指定したいブロック要素ともう一つのブロック要素との関係性を確認して padding / margin を決定します…

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

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

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

【理由】そうすることで、子ブロックの幅を指定するときも “width: 100%;” など シンプルに指定することができます(※子ブロックに margin を指定すると、幅や高さの指定に 最悪の場合)calc 関数を使わなくてはいけなくなり… CSS が複雑化します、、)

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

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

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

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

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

例1.

例えば、スマホのホーム画面に保存された1つのアイコン”A”とその中に書かれたイラストまでの余白は “padding” で指定します。アイコン”A”と その隣のアイコン”B”との距離は “margin” で指定します。

例2.

例えば、今見ているパソコンの画面の中に2つのウィンドウ”A”と”B”を左右隣り合わせに表示します。

左のウィンドウ”A”の端から、画面内部の表示領域までの距離は “padding” で指定します。
また、左のウィンドウ”A”と右のウィンドウ”B”間の距離は “margin” で指定します。

簡単ですよね!

COMMENT

メールアドレスが公開されることはありません。