CSS margin（マージン）

CSS margin（マージン）プロパティは、要素の周囲のスペースを定義します。

margin

marginは、周囲の（外枠の）要素領域をクリアします。marginには背景色がなく、完全に透明です。

marginは、要素の上・下・左・右のマージンを個別に変更したり、すべてのプロパティを一度に変更したりできます。

指定可能な値

marginには負の値を使用でき、コンテンツが重なります。

Margin - 各辺のマージン属性

CSSでは、辺ごとに異なるマージンを指定できます。

Margin - 略式プロパティ

コードを短縮するために、1つのプロパティでmarginによって指定されるすべてのマージン属性を使用することができます。これは略式プロパティ（shorthand property）と呼ばれます。

すべてのマージン属性の略式プロパティは次のとおりです。margin :

marginプロパティには1〜4つの値を指定できます。

• margin:25px 50px 75px 100px;
  • 上マージンは25px
  • 右マージンは50px
  • 下マージンは75px
  • 左マージンは100px
  
  
• margin:25px 50px 75px;
  • 上マージンは25px
  • 左右のマージンは50px
  • 下マージンは75px
  
  
• margin:25px 50px;
  • 上下のマージンは25px
  • 左右のマージンは50px
  
  
• margin:25px;
  • 4つのマージンすべてが25px

その他の例

テキストの上マージンをセンチメートル値で設定します。
この例では、センチメートル値を使用してテキストの上部マージンを設定する方法を示します。

Set パーセンテージ値を使用してテキストの下マージンを設定する
この例では、親要素の幅に対するパーセンテージ値を使用して下マージンを設定する方法を示します。

すべてのCSSマージン属性