CSS のマージンとパディング: 違いは何ですか? それぞれをいつ使用するか?

CSS における Margin と Padding の区別を理解する

CSS を使用する場合、Margin と Padding を区別することが重要です。どちらのプロパティもページ要素の間隔に影響しますが、その方法は異なります。

Margin

• 要素の境界の外側のスペースを定義します。
• 隣接する要素の余白と重なる可能性があります。
• 要素のクリック可能範囲には含まれません領域または背景色/画像。

パディング

• 要素のコンテンツ領域内のスペースを定義します。
• スペースを保持します隣接する要素にパディングがある場合でも、要素間に含まれます。
• 要素のクリック可能領域と背景色/画像。

マージンまたはパディングを使用する場合

これらの違いを理解して、マージンまたはパディングをいつ使用するかを決定することが重要です。

• 要素間の距離に関係なく、要素間に特定の距離を維持したい場合は、マージンを使用します。
• サイズやクリックしやすさに影響するなど、要素のコンテンツの周囲にスペースを追加する場合は、パディングを使用します。

例

以下のスニペットは、マージンとパディングの違いを視覚的に示しています。包含ボックス内で 2 つの要素を使用します:

<div>
<p><strong>デフォルト:</strong></p>
<p>要素は追加のスペースなしで並べて配置されます。</p>
<p><strong>パディング:</strong></p>
<pre class="brush:php;toolbar:false"><div>
<p>追加各要素の上部に 20 ピクセルのパディングを追加すると、要素自体内のスペースは維持しながら要素間のスペースが増加します。</p>
<p><strong>マージン:</strong></p>
<pre class="brush:php;toolbar:false"><div><p>マージン 20 ピクセルの追加各要素の先頭に追加すると、要素間のスペースも広がりますが、要素のコンテンツ間のスペースは同じままです。さらに、要素にクリック イベントが割り当てられている場合、クリック可能領域にはコンテンツのみが含まれ、マージンは含まれません。</p></div>