基礎31. 外余白のプロパティ（margin）

marginプロパティ（マージン）

marginはボックス（要素）の外余白の設定です。上下左右4方向で設定できます。単位は主にpx, %を使用します。
※emでも設定できますが通常はあまり使用しません。

div{
  /* 上方向 */
  margin-top: 10px;
  /* 右方向 */
  margin-right: 10px;
  /* 下方向 */
  margin-bottom: 10px;
  /* 左方向 */
  margin-left: 10px;
}

marginのショートハンド

ショートハンドという省略記法で指定すると下記のようになります。各値は半角スペースで区切ります。

/* 上10px、右20px、下30px、左40pxで指定 */
div{
  margin: 10px 20px 30px 40px;
}

/* 上下10px、左右20pxで指定 */
div{
  margin: 10px 20px;
}

/* 上10px、左右20px、下30pxで指定 */
div{
  margin: 10px 20px 30px;
}

/* 上下方向は、値なし。左右は20px */
div{
  margin: 0 20px;
}

marginの注意点

注意点として親要素と子要素のwidthプロパティ, heightプロパティが同じ値の場合、子要素でmarginを指定しても親要素を押し広げることはできません。

<div class="wrap">
  <div class="inner">ブロック</div>
</div>

/* 子要素にmarginを指定しても、
親要素の大きさは変わらない。 */
.wrap{
  width: 400px;
  background-color: #ddd;
}
.inner{
  width: 400px;
  margin: 40px;
  background-color: #ff0000;
}

特殊な値「auto」

左右のmarginには「auto」という特殊な値が使用できます。autoは左右どちらかのmarginに値が設定されていると、値を指定した反対方向にmargin:auto指定するとを余白を自動調整します。上下の値にautoを指定した場合は無視されます。この値を利用してブロックレベルの要素を常に中心に整列することができます。

<div>ブロック</div>

/* 画面の中央に常に整列 */
div{
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ddd;
}

右側に値を設定し左側をmagin: auto;にすると右側に整列できます。

<div>ブロック</div>

/* 右側に整列 */
div{
  width: 400px;
  margin-left: auto;
  margin-right: 0;
  background-color: #ddd;
}

ネガティブマージン

値に – （マイナス）をつけると1つ前の要素に重ねることができます。

<div>
  <div class="block01">ブロック01</div>
  <div class="block02">ブロック02</div>
</div>

.block01{
  width: 800px;
  height: 100px;
  margin: 0 auto;
  background-color: #ddd;
}
.block02{
  width: 400px;
  height: 100px;
  margin-top: -50px;
  margin-left: auto;
  margin-right: auto;
  background-color: #f00;
}

まとめ

• marginはボックスの外余白の設定
• ショートハンドの指定は上から右回りで指定する
• 左右にはautoという自動調整の値がある
• ネガティブマージンを使うと要素を重ねることができる