CSSマージン（margin）徹底解説：余白の設定方法を基礎から学ぶ

Webページ上の要素同士に適切な間隔を持たせることは、見た目が美しく、使いやすいユーザー体験を設計するうえで非常に重要です。マージン（margin）は、HTML要素の周囲に空き領域を作り、ページ内の他の要素と要素を分離するために使われるプロパティです。

CSSでは、marginプロパティとその4つの個別プロパティを使って、要素の周囲にマージンを設定できます。

このチュートリアルでは、実際のコード例を交えながら、CSSでマージンを設定する方法を詳しく解説します。読み終える頃には、CSSのmarginプロパティをプロのように扱えるようになっているはずです。

CSSマージンとは

CSSのmarginプロパティは、要素の周囲に余白を作成するために使用します。この余白があることで、Webページ上のさまざまな要素をボーダーの外側で簡単に分離できます。

CSSにおいてmarginプロパティは、4つの個別プロパティのショートハンド（省略記法）です。これらの個別プロパティを使うと、Web要素の上下左右それぞれのマージンを個別に設定できます。

Webページ上のすべての要素は、1つ以上の「ボックス」で構成されています。各要素はボックスモデル（box model）に従って、そのボックスがページ上にどのように表示されるかが決まります。

マージンはボックスモデルの主要な構成要素のひとつで、ボックスモデルの最も外側の層に位置します。下図のように、マージンはHTML要素のボーダーより外側に適用されます。

このチュートリアルでは主にmarginプロパティに焦点を当てます。ボックスモデルの他の構成要素について詳しく知りたい方は、CSSのborder（ボーダー）やpadding（パディング）に関する記事も併せてご覧ください。

辺ごとのマージンを個別に指定する

要素の各辺のマージンを個別に設定するには、以下の4つのプロパティを使用します。

• margin-top（上）
• margin-right（右）
• margin-bottom（下）
• margin-left（左）

これらのプロパティにより、要素の特定の辺だけにマージンを定義できます。各プロパティには、マージンのサイズを決めるための値として次の4種類を指定できます。

• length：px、emなどのCSSの長さの単位でマージンを指定します。
• percentage（%）：マージンを適用する要素の幅に対する割合（パーセンテージ）で指定します。
• auto：ブラウザにマージンを自動計算させます。
• inherit：親要素からマージンを継承します。

それでは、具体的な例を見ながら、marginの個別プロパティの動作を確認していきましょう。

ここでは、ボックスをデザインし、その周囲にマージンを設けてページ内の他の要素と分離したい場面を想定します。条件は以下のとおりです。

• 上マージン：50px
• 左マージン：30px
• 右マージン：40px
• 下マージン：40px

このボックスは、次のコードで作成できます。

index.html

<div class="outer">
<p class="box">
	This is a box.
</p>
</div>

styles.css

.box {
	margin-top: 50px;
	margin-left: 30px;
	margin-right: 40px;
	margin-bottom: 40px;
	border: 1px solid red;
}

.outer {
	border: 1px solid blue;
}

このコードの表示結果は以下のとおりです。

このコードでは、2つのボックスを作成しています。1つ目のボックスは<div>タグで定義され、outerクラスが割り当てられています。CSSファイルでは、outerクラスを持つ要素には幅1pxの青い実線ボーダーを付けるよう指定しています。これは、内側のボックスにできたマージンを見やすく表示するためです。

<div>タグの中には<p>タグがあり、テキスト「This is a box」が含まれています。この<p>タグにはboxクラスが付いているため、CSSファイル内のboxスタイルが適用されます。

結果として、<p>タグには上50px・左30px・右40px・下40pxのマージンと、幅1pxの赤い実線ボーダーが設定されます。画像のとおり、マージンによって<p>ボックスのボーダーと青い外側のボックスとの間に隙間ができています。マージンがなければ、2つのボックスはより接近して表示されるでしょう。

marginショートハンドでまとめて指定する

先ほどの例では、マージンを指定するのに4行のコードが必要でした。marginプロパティ（ショートハンド）を使えば、コードをより効率的に書けます。

marginプロパティは、前述の4つの個別プロパティをまとめて指定できる省略記法です。複数行に分けて書く代わりに、1行でボックス全体のマージンを指定できます。

marginショートハンドの構文は、指定する値の数によって挙動が変わります。指定できる値は最少1個、最大4個です。以下、すべてのケースについて順番に解説します。

値を4つ指定する場合

4つの異なるマージンを持つボックスを作る場合、個別プロパティを使う代わりに、marginショートハンドで4つの値を指定できます。

4つの値を指定した場合、値は次の順序で適用されます（時計回りの順）。

• 1つ目の値：上マージン
• 2つ目の値：右マージン
• 3つ目の値：下マージン
• 4つ目の値：左マージン

たとえば、「上25px・右25px・下50px・左60px」のマージンを持つボックスを作りたい場合は、次のコードを使用します。

.box {
	margin: 25px 25px 50px 60px;
	border: 1px solid red;
}

このコードの表示結果は以下のとおりです。

この例では、指定した値に基づいて、各辺が異なるマージンを持つ内側のボックスが作成されています。内側のボックスには幅1pxの赤い実線ボーダーを付け、さらに以前使った青いボックスのコードを再利用することで、適用されたマージンの大きさがひと目でわかるようにしています。

値を3つ指定する場合

上下のマージンは変えたいけれど、左右は同じ値にしたい場合は、marginプロパティに3つの値を指定します。

3つの値は、次の順序でボックスに適用されます。

• 1つ目の値：上マージン
• 2つ目の値：左右両方のマージン
• 3つ目の値：下マージン

たとえば、「上50px・左右25px・下60px」のマージンを持つボックスを作りたい場合は、次のようなコードになります。

.box {
	margin: 50px 25px 60px;
	border: 1px solid red;
}

このコードの表示結果は以下のとおりです。

ご覧のとおり、内側のボックスの左右には同じマージン値（25px）が適用され、上下にはそれぞれ独自のマージン（上50px・下60px）が設定されています。

このコードでも、内側のボックスの周囲に赤いボーダーを定義してマージンが適用される位置を示し、最初の例の青いボックスのコードを再利用して、マージンによってできた隙間を視覚的に表現しています。

値を2つ指定する場合

上下に同じマージン値を、左右に別の同じマージン値を設定したい場合は、marginプロパティに2つの値を指定します。

2つの値は、次の順序で要素に適用されます。

• 1つ目の値：上下のマージン
• 2つ目の値：左右のマージン

たとえば、縦方向のマージンが50px、横方向のマージンが30pxのボックスを作りたい場合は、次のCSSで実現できます。

.box {
	margin: 50px 30px;
	border: 1px solid red;
}

このコードの表示結果は以下のとおりです。

ボックスの上下には50pxのマージンが、左右には30pxのマージンがそれぞれ適用されています。

こちらも同様に、内側のボックスの周囲に赤いボーダーを指定してマージンの大きさを示し、以前の例の青いボックスのコードを再利用して、内外のボックス間に生まれたスペースを視覚化しています。

値を1つ指定する場合

ボックスの全辺に同じマージンを設定したい場合は、marginプロパティに値を1つ指定するだけです。指定した値が、ボックスのすべての辺に適用されます。

たとえば、全周に50pxのマージンを持つボックスを作るには、次のコードを使用します。

.box {
	margin: 50px;
	border: 1px solid red;
}

このコードの表示結果は以下のとおりです。

ボックスのすべての辺に50pxのマージンが適用されました。マージンがボックスのボーダーの外側に適用されていることを示すため、ボックスの周囲に赤いボーダーを付け、さらにその赤いボックスを青いボックスの中に配置して、マージンをわかりやすく表現しています。

inheritで親要素のマージンを継承する

inheritという値は、親要素からマージンを継承するために使用します。

内側のボックスのマージンを外側のボックスと同じにしたい場合、inherit値が便利です。親要素のマージンを変更すると、子要素（親要素内にあるボックス）のマージンも自動的に調整される点がメリットです。

たとえば、親要素の左マージンが50pxであるとき、その中に含まれるボックスにも同じマージン値を持たせたいとしましょう。この場合、次のコードで実現できます。

.box {
	margin-left: inherit;
	border: 1px solid red;
}

.outer {
	margin-left: 50px;
	border: 1px solid blue;
}

このコードの表示結果は以下のとおりです。

外側のボックス（青いボーダー）の左マージンは50pxです。そして、内側のボックス（赤いボーダー）も親要素から継承した50pxの左マージンを持っています。

autoで要素を中央に配置する

autoという値は、要素をコンテナ内で水平方向に中央揃えするために使用します。

auto値を指定すると、内側の要素は定義された幅を占め、残りのスペースが左右のマージンに均等に分配されます。

たとえば、幅500pxのボックスの中に幅250pxのボックスを作った場合、autoキーワードでマージンを作ると、左右に125pxずつのマージンが適用されます。計算式は以下のとおりです。

(外側のボックスの幅 − 内側のボックスの幅) / 2

今回の場合、次の計算で左右のマージンのサイズを求められます。

(500 − 250) / 2 = 125

計算結果は125となり、これがボックスの左右のマージンに適用される値です。これらの寸法を使ったボックスの例がこちらです。

index.html

<div class="outer">
<p class="box">
	This is a box.
</p>
</div>

styles.css

.box {
	width: 250px;
	margin: auto;
	border: 1px solid red;
}

.outer {
	width: 500px;
	border: 1px solid blue;
}

このコードの表示結果は以下のとおりです。

ご覧のとおり、内側のボックス（赤いボーダー）の左右に等しいマージンが作成されています。つまり、内側のボックスが水平方向に中央揃えされている状態です。これは、margin: auto を使ってマージンを指定したためです。

なお、この例では上下のマージンを指定していないため、内側のボックスの上下にはマージンがありません。

まとめ

CSSのmarginプロパティは、要素のボーダーとWebページ上の他の要素との間に余白を作るために使用します。

このチュートリアルでは、具体例を参照しながら、CSSのmarginプロパティとその4つの個別プロパティを使って、要素のボーダーと他の要素の間に余白を作る方法を解説しました。これであなたも、CSSのmarginプロパティをプロのように使いこなす準備が整いました！