ボーダーの外側に余白を設定するmarginプロパティ

ボックスの外側で上下左右の隣り合うボックスとの間の余白（マージン）を調整するためのプロパティが「margin」プロパティです。

marginプロパティは上下左右の4辺の外側の余白をまとめて指定します。次の例は、ボックスの上下左右外側に30ピクセルの余白を設定しています。余白の影響範囲がわかりやすいように前後に要素を配置して背景色を設定しています。

<p>前の要素</p>
<p class="margin-box">marginを指定した要素</p>
<p>後の要素</p>

p {
    background-color: #58a9ef;
}
.margin-box {
    background-color: #f89174;
    margin: 30px;
}

marginプロパティで指定された余白は、ボックスの外側つまり隣り合うボックスとの距離になります。 marginプロパティの余白にはボックスの背景色や背景画像の影響する範囲外になります。margin部分の背景は透明で、親要素やそれより上位の要素の背景が見えていることになります。

上下左右のmarginを個別の値に指定するプロパティ

上下左右のマージンを各辺それぞれ個別に指定するには、「margin-top」、「margin-bottom」、「margin-left」、「margin-right」プロパティを使用します。

.margin-box {
    background-color: #666666;
    margin-top: 60px;
    margin-right: 80px;
    margin-bottom: 20px;
    margin-left: 40px;
}

marginプロパティの値の指定にショートハンドプロパティを使う

paddingプロパティ同様、marginプロパティもショートハンドプロパティを使って４辺を別の値に指定することができます。ショートハンドプロパティの指定のしかたはpaddingプロパティと全く同じで、１～４つの値を半角スペースで区切って指定します。

margin: 40px 30px 20px 10px; /* 上 右 下 左 */
/*
各プロパティで指定
margin-top: 40px
margin-right: 30px
margin-bottom: 20px
margin-left: 10px
*/

marginにマイナスの値を指定する（ネガティブマージン）

marginプロパティの値にマイナス値を設定することよって、親要素からはみ出た位置や、兄弟要素と重なる位置に要素を配置することができます。

.margin-box {
    background-color: #f89174;
    margin-top: -10px; /* この値を変更 */
    margin-right: 80px;
    margin-bottom: 20px;
    margin-left: -30px; /* この値を変更 */
}

marginプロパティに指定できる「auto」について

marginプロパティには「auto」という値が指定できます。autoを指定したときにはどのような挙動をするか確認してきましょう。

div {
    background-color: #f89174;
    width: 100px;
    height: 100px;
}

marginプロパティは特に指定されていない場合、初期値は0になり、通常ボックスは左に寄せられて配置されます。この要素のmargin-leftプロパティの値をautoに指定を追加すると以下のような配置になります。

div {
    background-color: #58a9ef;
    width: 100px;
    height: 100px;
    margin-left: auto; /* このプロパティを追加 */
}

autoの意味はいまある「余白」を、そのマージンに割り当てるという考えていいでしょう。margin-leftプロパティにのみautoに指定すると、margin-rightプロパティの初期値が0ですので、今ある余白をすべて左側に割り当てることになり、もともと右側にあった余白が左側に割り当てられてしまうので、要素が右側に配置された状態になるわけです。

では数値で指定されたマージンがあった場合はどうなるでしょう。autoが吸収するのは今ある余白のマージンなので、数値指定されたmarginプロパティの値とwidthプロパティで指定されたボックスの幅を引いた余りがautoに指定した側に割り当てられます。

div {
    background-color: #58a9ef;
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: 50px; /* このプロパティを追加 */
}

結果、ボックスは右から50ピクセルの位置に配置されます。

左右のマージンの値がautoになってい場合どうなるでしょう。余ったマージンはautoの部分に均等に振り分けられることになります。結果として要素は中央に配置されることになります。これはブロックボックスを水平中央に配置するテクニックとしてよく使われます。

div {
    background-color: #58a9ef;
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto; /* この値を変更 */
}

ただしこれらの挙動ですがあくまで水平方向のみの動作です。ですのでautoの値を上下のmarginプロパティに指定しても垂直中央配置にはなりません。

マージンの相殺（Collapsing Margins）とは

垂直方向にマージンを指定したブロックレベル（displayプロパティの値が「block」）の要素が前後に並んだ時、それぞれ指定されたマージンの値は合算されず、大きい方の値に吸収されるということが起こります。これを「マージンの相殺」と言います。marginプロパティの値が等しい場合はいずれかに値になります。また、マージンの相殺は垂直マージンにのみ起こります。

しかし、組み合わせるプロパティによってはマージンの相殺が必ず起きるというわけではないのでどのような場合に起こるのか見ていきましょう。

隣接する要素の上下のマージンで起こる相殺

隣接した要素の上下のマージンで相殺がおきます。前の要素にmargin-bottomプロパティを、後ろの要素にmargin-topプロパティを指定した場合、それらの間にあるマージンは相殺されます。

親要素にはpaddingプロパティやbordeプロパティを指定していない場合、入れ子になっていてもマージンの相殺がおこります。

親要素との同じ方向のマージンで起こる相殺

親要素にmargin-topプロパティを指定し、最初の子要素にもmargin-topプロパティを指定した場合にもマージンは相殺されます。

親要素と最初の子要素の上のマージンだけでなく、親要素と最初の子要素の下のマージンでも相殺はおこります。 ただし、上のマージンとは異なり、下のマージンは親の高さがautoの場合にのみ相殺されます。

空の要素を挟むとに起こるmarginの相殺

空（内容のない）の要素にmarign-bottomプロパティとmargin-topプロパティを指定した場合、それらの マージンは相殺されます。何も含んでいないブロック要素がある場合、マージンの相殺が起きます。

marginの相殺が起きない場合

親要素にborderプロパティやpaddingプロパティを使用するなどして子要素と隣接しないようにするとマージンの相殺は起きません。親要素に高さ、または最小の高さを指定すると末尾の子要素とのマージンに限って相殺はおきません。

これ以外にもさまざまなプロパティに組み合わせによってもマージンの相殺がおきないことがあります。