[解決済み] CSSでmarginとpaddingを使い分けるタイミング【終了しました

質問

CSSを記述する際、どのようなルールやガイドラインで margin を使用し、いつ padding ?

解決方法は？

TL;DR。 デフォルトでは、ボーダーや背景があり、その可視ボックス内のスペースを増やしたい場合を除き、どこでもマージンを使用しています。

私にとって、paddingとmarginの最大の違いは、垂直方向の余白は自動で折りたたまれ、paddingは折りたたまれないことです。

2つの要素が1つずつ上にあり、それぞれのパディングが 1em . このパディングは要素の一部とみなされ、常に保存されます。

つまり、最初の要素のコンテンツ、その後に最初の要素のパディング、その後に2番目の要素のパディング、その後に2番目の要素のコンテンツが表示されることになるのです。

したがって、2つの要素のコンテンツは、最終的に 2em を離す。

ここで、そのパディングを1emのマージンに置き換えてください。マージンは要素の外側とみなされ、隣接するアイテムのマージンは重なります。

つまり、この例では、最初の要素のコンテンツと、その後に続く 1em の複合余白の後に、2番目の要素のコンテンツが続きます。つまり、2つの要素の内容は、あくまでも 1em を離す。

ということが分かっているときに、とても便利です。 1em のように、ある要素の周囲に間隔を空ける。

他の2つの大きな違いは、クリック領域と背景色/画像にはパディングが含まれるが、マージンには含まれないことである。

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>