余白とパディング

マージンとマージンの区別は、CSSで異なる項目間の間隔を提供するために使用される2つの重要な概念である。パディングとマージンは互換性がなく、異なる目的を果たすため、適切に使用する必要があります。パディングとは、ブロックのコンテンツとボーダーの間のスペースのことです。一方、余白とは、ブロックの境界の外側にあるスペースのことです。マージンはブロックと隣接するブロックを分離し、パディングはボーダーとコンテンツを分離します。

パッドは何ですか？

CSS（Cascading Style Sheets）において、パディングとは、コンテンツとボーダーの間に確保されるスペースのことです。ブロックのコンテンツとそのエッジを分離するものです。パディングは透明で、要素の背景画像または背景色を含む。要素のパディング量は、CSS コード中の「padding」という用語を使って指定する。例えば、コンテンツの周りに25ピクセルのパディングを追加する場合、以下のようなコードになります。

div{width: 300px; height: 300px; fill: 25px; border: 25px solid; }.

以下のスニペットでは、左右で異なるパディング値を指定しています。

div{width: 300px; height: 300px; top padding: 25px; bottom padding: 35px; left padding: 5px; right padding: 10px; border: 25px solid; } ←クリックすると拡大します。

マージンは何ですか？

CSS（Cascading Style Sheets）では、マージンとは枠の外側のスペースのことです。ブロックと他のブロックを分離するものです。マージンも透明であるが、パディングとの大きな違いは、マージンには要素に適用される背景画像や背景色が含まれないことである。CSSにおけるマージンの量は、「マージン」という用語で指定される。以下のコードでは、divブロックの周囲に25pxのマージンを適用しています。

div{Width: 320px; Height: 320px; Border: 5px solid; Margin: 25px;}.

また、ブロックの辺ごとに異なる値を指定することも可能です。以下のコードでは、辺ごとに異なるマージン値を適用しています。

div{width: 320px; height: 320px; border: 5px solid; top margin: 25px; bottom margin: 35px; left margin: 5px; right margin: 10px;} ←クリックすると拡大します。

マージンとパッドの違い

-Paddingはボーダーとコンテンツの間のスペース、marginはボーダーの外側のスペースです。

-パディングは、ブロックのコンテンツとボーダーを分離します。マージンは、1つのブロックと他のブロックを分離します。

-パディングには、コンテンツに適用される背景画像と背景色が含まれますが、マージンにはこれらは含まれません。

-隣接するブロックの余白は重なることがありますが、パディングは重なりません。

概要

パディングとマージン

パディングとは、ブロックの枠の中にある、枠と内容を分けるスペースのことです。マージンとは、ブロックと隣接するブロックを区切るボーダーの外側のスペースのことです。また、パディングにはコンテンツの周囲に適用される背景画像や背景色が含まれるが、マージンにはそれらが含まれないという違いもある。ブラウザがページを表示する際、隣接するブロックの余白が重なることがありますが、パディングを使用するとそのようなことはありません。

1. CSSフレームモデル Felix Legs (CC BY-SA 3.0)