入門7：【CSS/margin】マージンの基本と応用を徹底マスターしよう

CSSのmarginは余白を設定するときのプロパティです。Webデザインをするとき、余白は大事な要素になります。余白があることで目立たせたいコンテンツがより注目されるようになるからです。

marginの設定1つで、見やすいサイトや読みやすい文章になります。このページではCSSのmarginプロパティについて基本から応用までまとめて解説します。Webデザインに必須となるmarginを使いこなしましょう。

marginの基本

marginプロパティとは

marginプロパティを使うと要素の外側に余白を作ることができるのですが……余白は文章を区切る以外にもさまざまな用途で使います。

たとえば、ボタン画像を並べて表示したとき、ボタン同士がくっついていると押し間違いが発生しやすくなるでしょう。そのような間違いを防ぐために、ボタン同士に適切な距離を保つのもmarginプロパティの役割です。

margin：3つの記述ルール

①：上下左右の余白をまとめて指定する

margin : 10px 20px 30px 40px;

4つの値はそれぞれ上マージン、右マージン、下マージン、左マージンを表しています。上記であれば上に10ピクセルの余白、右に20ピクセルの余白、下に30ピクセルの余白、左に40ピクセルの余白が、それぞれ作られます。上から時計回りに指定すると覚えておきましょう。

余白の大きさを指定するときはピクセルのほか、フォントサイズを基準にしたemや、要素サイズを基準にした%も利用できます。

②：省略して指定する

marginプロパティでは4つの値を書いた場合と、値を省略した場合で動きが変わります。

margin : 10px;

このように1つの値を書いた場合は、その値が上下左右の余白として設定されます。この例では、上下左右に10ピクセルずつの余白が作られます。

margin : 10px 20px;

このように2つの値を書いた場合は上下と左右が同じ余白になります。この例では、上下に10ピクセル、左右に20ピクセルの余白が作られます。

margin : 10px 20px 30px;

このように3つの値を書いた場合は、上、左右、下の順番で余白が作られます。この例では、上に10ピクセル、左と右に20ピクセルずつ、下に30ピクセルです。

③：個別に指定する

marginは上下左右を個別に指定することもできます。

上余白　margin-top : 10px;
右余白　margin-right : 10px;
下余白　margin-bottom : 10px;
左余白　margin-left : 10px;

個別指定を使うと必要な箇所にだけ余白を設定できます。

marginの使用例

HTMLタグ

<div class="button1">詳細はこちら</div>
<div class="button2">購入はこちら</div>
<p class="note1">※目的に応じたボタンを押してください</p>

CSS

.button1 { margin : 10px; border:solid 1px black; }
.button2 { margin : 0; border:solid 1px black; }
.note1 { margin : 0; }

この例では2つのボタンと説明文を表示しています。1つ目のボタンは上下左右に10ピクセルずつの余白があります。2つ目のボタンと説明文の余白は0なのでコンテンツが隙間なく隣接します。

marginとpaddingの違い

marginとpaddingはどちらも余白に関するプロパティですが、生成される余白の位置が異なります。

marginは要素の外側に余白が作られるのに対して、paddingは要素の内側に余白が作られると覚えておきましょう。

marginを使うときの注意点

インライン要素のmargin

インライン要素にmarginを指定すると、左右の余白だけが作られて上下の値は無視されます。上下の余白を作りたいときはブロック要素である必要があります。

どのHTMLタグがインライン要素なのかを整理してみましょう。

インライン要素

aタグ、imgタグ、spanタグ

ブロック要素

pタグ、divタグ、h1～h6タグ、ulタグ、olタグ、tableタグ

Web制作をする上で、aタグ（リンク）に余白を作る機会は多いかもしれません。aタグに余白を作るには2つの方法があります。

aタグに余白を作る方法①：ブロック要素で囲む

aタグをdivタグで囲い、divタグに対してmarginを設定する方法です。

HTMLタグ

<div class=”link_container”><a href=”#”>リンク</a></div>

CSS

.link_container { margin-top : 10px; margin-bottom : 10px;}

このように、リンクを囲う専用のlink_containerのようなクラスを作っておき、そのクラスにmarginを設定すると使い勝手がよくなります。

aタグに余白を作る方法②：aタグにブロック要素の振る舞いをさせる

そんなときはaタグにdisplay:inline-blockを指定して、インラインブロック要素に変換します。インラインブロック要素なら上下marginが設定できます。

CSS

a { display : inline-block; }

marginのルール化

marginのautoを使いこなす

marginはピクセルやパーセントなどの数値入力で余白指定しますが、値をautoに設定することで右揃え・中央揃えのプロパティとして使えます

marginを使い中央揃えをする方法

以下のように左右のmarginをautoに設定します。

margin-left:auto;

margin-right:auto;

左右をautoに設定した要素は中央揃えで表示されます。中央揃えのプロパティと言えばtext-align:centerが有名ですが、こちらはブロック要素を中央揃えにすることができません。margin:autoを使った方法なら、ブロック要素も中央揃えにできます。

marginで右寄せにする方法

以下のように左側のｍarginをautoに設定します。

margin-left:auto;

margin-right:0;

これで右寄せ表示が可能です。margin-right:0をmargin-right:10pxなどに変えた場合、右寄せした状態で右側にマージンを設定することができます。細かなデザイン調整に便利なテクニックです。

marginの相殺を理解しよう

margin相殺の例

marginが相殺される例を見てみましょう。

HTMLタグ

<div class=”youso_a”>要素A</div>
<div class=”youso_b”>要素B</div>
<div class=”youso_c”>要素C</div>

CSS

.youso_a { margin-bottom : 10px; }
.youso_b { margin-top : 10px; margin-bottom : 50px; }
.youso_c { margin-top : 10px; }

上記では3つのブロック要素があり、それぞれにmarginが指定されています。要素Aは下方向に10ピクセルの余白、要素Bは上方向に10ピクセルの余白があります。

このとき、10＋10で20ピクセルの余白になると考えたくなりますが、実際は10ピクセル余白しか作られません。隣接した要素が同じ余白を持つ場合、相殺されて片方の余白だけが有効になります。

また、要素Bは下方向に50ピクセルの余白があり、要素Cは上方向に10ピクセルの余白があります。こちらも50+10で60ピクセルとはならず、50ピクセルの余白が作られます。marginの値に差がある場合は、大きいほうのmarginが採用されます。

margin相殺の4パターン

①：隣接兄弟要素のマージン

上記で説明したパターンです。同じ階層にいる兄弟要素の上下マージンは相殺されます。

②：親子要素の上マージン

ボーダーが設定されていない親子要素の上マージンは相殺します。例を見てみましょう。

HTMLタグ

<div class=”oya”>
    <div class=”ko”>子</div>
</div>

CSS

.oya { margin-top : 10px; width : 100px; height : 100px;}
.ko { margin-top : 10px; width : 50px; height : 50px;}

この場合は子要素のマージンが無視されて親要素の10ピクセルだけが反映されます。

子要素が無視される条件は、親要素がborderやpaddingを持たないことです。borderやpaddingがあれば親と子は完全に隣接とは見なされないため、マージンの相殺は起こりません。

③：親子要素の下マージン

概要は親子要素の上マージンと同じです。親要素のmargin-bottomと、その親に囲われている末尾の子要素のmargin-bottomが相殺します。

HTMLタグ

<div class=”oya”>
    <div class=”ko1”>子1</div>
    <div class=”ko2”>子2</div>
</div>

CSS

.oya { margin-bottom : 10px; width : 100px; height : 100px;}
.ko2 { margin-bottom : 10px; width : 50px; height : 50px;}

この例なら子2の10ピクセルは無視され、親要素の10ピクセルの余白が作られます。

子要素のマージンが相殺される条件は、親要素がborderやpaddingを持たないことです。ここまでは上マージンの相殺と同じですね。下マージンの相殺はさらに、親要素がheightとmin-heightの値を持たない場合のみ発生します。まとめると以下のようになります。

この3つの条件に当てはまるときに親子要素で下マージンの相殺が起こります。

④：空要素のマージン

中身のないブロック要素にmargin-topとmargin-bottomを指定したときに相殺が起こります。

HTMLタグ

<div>要素1</div>
<div class=”kara”><div>
<div>要素2</div>

CSS

.kara { margin-top : 10px; margin-bottom : 10px; }

marginのみの空要素は相殺が起こります。上下に10ピクセルのマージンを設定していますが、合計20ピクセルとはならず、片方が無視されます。

CSS学習：marginの基本と応用まとめ

marginの基本的な使い方は余白を指定することです。余白は上下左右を一括指定することもできますし、個別に指定することもできます。再現したいデザインに応じて使い分けましょう。

また、margin:autoを使うことで中央揃えや右揃えの表示ができます。ブロック要素を中央に表示したいときに便利なテクニックです。

marginを使う上での注意点はマージンの相殺です。相殺の条件を把握しておくことで、レイアウト崩れを防げます。マージンを理解できるとデザインの幅が広がりますので、ぜひCSSのmarginプロパティをマスターしてください。