CSS margin 要素の外側の余白を指定する

CSSのmarginプロパティで、要素の外側の余白を指定するサンプルです。

目次

仕様 marginプロパティの仕様
サンプル 数値+pxを指定
  数値+%を指定
  マージンにautoを指定してセンタリング(中央寄せ)する
  2つの要素のマージンが上下に被った場合
  2つの要素のマージンが左右に被った場合
  marginを個別に指定

marginプロパティの仕様

margin : 値  → 上下左右を指定
margin : 値 値  → 上下と左右を指定
margin : 値 値 値  → 上と左右と下を指定
margin : 値 値 値 値 → 上と右と下と左を指定 (時計回りです)

marginプロパティは、要素の外側の余白を指定します。値は半角スペースで区切ります。

説明
数値 + 単位   指定した単位で設定します。
数値 + % 親要素の幅(width)に対する割合で設定します。
auto 自動で調整します。
値を継承しない

  • マージン(margin)は、ボーダーの外側の余白です(図の黄の部分)。隣の要素と距離を取ります。
  • marginの初期値は0です。マイナスの値も指定できます。
  • パディング(padding)は要素内の余白です。
  • ボーター(border)は要素の周りにある線です。
  • 以下はMDNのmarginプロパティのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/margin

 

数値+pxを指定

<style>
  .c1 {
    width: 200px;
    border: 1px solid #000;
  }
  .c2 {
    margin: 20px 20px 20px 20px; /*margin: 20px;と同じ*/
  }
</style>
<div class="c1">
  <div class="c2">テスト</div>
</div>

7行目は、marginに20pxを指定しています。半角スペース区切りです。

以下のイメージになります。
marginが20pxあります。

 

数値+%を指定

<style>
  .c1 {
    width: 200px;
    border: 1px solid #000;
  }
  .c2 {
    margin: 10% 10% 10% 10%; /*margin: 10%;と同じ*/
  }
</style>
<div class="c1">
  <div class="c2">テスト</div>
</div>

7行目は、marginに10%を指定しています。半角スペース区切りです。
親要素のwidthに対する割合になります。heightではありません。
親は、3行目でwidthを200pxで指定しているので、その10%の20pxになります。

以下のイメージになります。marginが上下左右とも20pxです。

 

マージンにautoを指定してセンタリング(中央寄せ)する

左右のマージンにautoを指定するとセンタリング(中央寄せ)できます。

<style>
  .div1 {
    border: 1px solid #000;
    width: 100%;
  }
  .div2 {
    margin: 0 auto;
    height: 50px;
    width: 100px;
    border: 1px solid #000;
  }
</style>
<div class="div1">
  <div class="div2">テスト2</div>
</div>

7行目は、marginで上下を0、左右にautoを指定しています。
→結果としてこの要素はセンタリングされます。

上記コードのサンプルです。

テスト2

 

2つの要素のマージンが上下に被った場合

2つのマージンの値が両方とも正の値で上下に重なった場合、値が大きい方のマージンが設定されます。

上記の図は、上が5pxのマージンで、下が10pxのマージンです。
この場合、マージンは10pxになります。

2つのマージンの値が正の値と負の値の場合は、足した値になります。
2つのマージンの値が両方とも負の値の場合は、小さい方の値になります。

 

2つの要素のマージンが左右に被った場合

パターン1

float:leftを指定した左のボックスのmargin-rightが10pxで、右のボックスのmargin-leftが20pxの場合、左のマージンの10pxになります。
右のマージンの20pxは反映されません。

パターン2

右のボックスのmargin-leftを150pxにしてその左端がブラウザの左端に到達していた場合、
右のボックスがブラウザの左端から150pxの幅をとって右にずれます。

 

marginを個別に指定

marginを個別に指定できます。

指定方法 意味
margin-top marginを上に指定する
margin-right marginを右に指定する
margin-bottom marginを下に指定する
margin-left marginを左に指定する

marginを個別に指定するサンプルです。

<style>
  .d1 {
    border: 1px solid #000;
    width: 200px;
    height: 100px;
  }
  .d2 {
    margin-top: 15px;
    margin-right: 5px;
    margin-bottom: 20px;
    margin-left: 30px;
  }
</style>
<div class="d1">
  <div class="d2">テスト</div>
</div>

8~11行目は、上下左右にそれぞれのmarginの値を指定しています。

関連の記事

CSS width 幅を指定するサンプル
CSS box-sizing paddingとborderの表示方法を指定
CSS border-collapse テーブルの枠線を重ねる/離す
CSS border-spacing テーブルの枠線の間隔を指定

△上に戻る