余白は、定義された境界線の外側で、要素の周囲にスペースを作成するために使用されます。

自分で試してみる »

CSSマージン

CSSmarginプロパティは、定義された境界線の外側で、要素の周囲にスペースを作成するために使用されます。

CSSを使用すると、余白を完全に制御できます。要素の各辺 (上、右、下、左) のマージンを設定するためのプロパティがあります。

Margin - 各サイド

CSSには、要素の各辺のマージンを指定するためのプロパティがあります。

• margin-top
• margin-right
• margin-bottom
• margin-left

すべてのマージンプロパティは、次の値を持つことができます。

• auto - ブラウザーがマージンを計算します
• length - 余白をpx、pt、cmなどで指定します。
• % - 包含要素の幅の%でマージンを指定します
• inherit - 親要素からマージンを継承することを指定します

ヒント：負の値を使用できます。

Margin - 一括指定プロパティ

コードを短くするために、1つのプロパティですべての余白プロパティを指定することができます。

• margin-top
• margin-right
• margin-bottom
• margin-left

それでは、これがどのように機能するかです。

marginプロパティに4つの値がある場合

• margin: 25px 50px 75px 100px;

  • 上のマージンは25px
  • 右のマージンは50px
  • 下のマージンは75px
  • 左のマージンは100px

marginプロパティに3つの値がある場合

• margin: 25px 50px 75px;

  • 上のマージンは25px
  • 左右のマージンは50px
  • 下のマージンは75px

marginプロパティに2つの値がある場合

• margin: 25px 50px;

  • 上下のマージンは25px
  • 左右のマージンは50px

marginプロパティに1つの値がある場合

• margin: 25px;

  • 4つの余白はすべて25pxです

auto値

marginプロパティをautoに設定して、コンテナ内で要素を水平方向に中央揃えにすることができます。

要素は指定された幅を取り、残りのスペースは左右の余白に均等に分割されます。

継承値

この例では、<p class="ex1">要素の左のマージンを親要素(<div>)から継承できます。

すべてのCSSマージンプロパティ

プロパティ	説明
margin	1つの宣言ですべてのマージンプロパティを設定するための簡略プロパティ
margiin-bottom	要素の下のマージンを設定します
margin-left	要素の左のマージンを設定します
margin-right	要素の右のマージンを設定します
margin-top	要素の上のマージンを設定します