CSS margin 外側の余白/中央・右に寄せる

CSSのmarginのサンプルです。

目次 marginとは
数値+pxを指定 / 数値+%を指定
要素を中央寄せにする要素を右寄せにする
マージンが上下に被った場合 / マージンが左右に被った場合
marginを個別に指定

marginとは

書き方 margin : 値  → 上下左右を指定
margin : 値 値  → 上下と左右を指定
margin : 値 値 値  → 上と左右と下を指定
margin : 値 値 値 値 → 上と右と下と左を指定 (時計回りです)
値は半角スペースで区切ります。
数値 + 単位
指定した単位で設定します。
数値+pxを指定
数値 + %
親要素の幅(width)に対する割合で設定します。
数値+%を指定
auto
自動で調整します。
備考
marginは、要素の外側の余白で隣の要素と距離を取ります。
ボーター(border)は要素の周りにある線で、パディング(padding)は要素内の余白です。
ブロックレベル要素を右寄せまたは中央寄せする場合はmarginを指定します。
ボタンやテキストボックスはインライン要素です。
中央寄せまたは右寄せにしたい場合は、インライン要素の親要素にtext-alignを使用します。
ボタンを中央寄せにする(インライン要素)
初期値 0
継承 なし
参考(MDN) 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です。

 

marginで要素を中央寄せにする

margin: 0 auto;

marginで上下を0、左右に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>

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

テスト2

 

注意点

テキストボックス(input type="text")やボタン(input type="button")はインライン要素です。
インライン要素を中央寄せにする場合は、テキストボックスやボタンの親要素にtext-align:centerを使用します。

marginで要素を右寄せにする

margin-left: auto
margin-right:0

margin-left:autoとmargin-right:0を指定するとブロックレベル要素が右寄せになります。

<style>
  .div3 {
    border: 1px solid #000;
    width: 100%;
  }
  .div4 {
    margin-left: auto;
    margin-right: 0;
    height: 50px;
    width: 100px;
    border: 1px solid #000;
  }
</style>
<div class="div3">
  <div class="div4">テスト</div>
</div>

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

テスト

 

注意点

テキストボックス(input type="text")やボタン(input type="button")はインライン要素です。
インライン要素を右寄せにする場合は、テキストボックスやボタンの親要素にtext-align:rightを使用します。

マージンが上下に被った場合

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

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

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 border-collapse テーブルの枠線を重ねる/離す
CSS border-spacing テーブルの枠線の間隔を指定

△上に戻る