CSS のマージンとパディングの違いは何ですか? 質問する

Question

パディングとマージンの最大の違いは、垂直マージンは自動的に折りたたまれるのに対し、パディングは折りたたまれないことです。

それぞれのパディングを持つ 2 つの要素が上下に並んでいるとします1em。このパディングは要素の一部とみなされ、常に保持されます。

最終的には、最初の要素のコンテンツ、最初の要素のパディング、2 番目の要素のパディング、2 番目の要素のコンテンツという順番になります。

したがって、2 つの要素の内容は2em分離することになります。

ここで、パディングを1emマージンに置き換えます。マージンは要素の外側にあるとみなされ、隣接する項目のマージンは重なります。

1emこの 2 番目の例では、最初の要素の内容、結合されたマージン、そして 2 番目の要素の内容が続きます。つまり、2 つの要素の内容は1em離れているだけです。

1emこれは、隣にある要素に関係なく、要素の周囲に間隔を空けたい場合に非常に便利です。

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

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>

デフォルトでは、境界線や背景があり、その表示ボックス内のスペースを増やしたい場合を除き、どこでも margin を使用します。

Answer 1