HTMLの margin とは？余白を自在に操るレイアウトテクニック

こんにちは、阿久梨絵です！
Webデザインにおいて、要素の配置や間隔を調整することは非常に重要です。その中でも margin （マージン）は、要素の外側の余白を設定するためのCSSプロパティであり、レイアウトの調整に欠かせません。本記事では、marginの基本から応用まで詳しく解説します。

marginとは？

marginは、HTML要素の外側の余白を設定するためのCSSプロパティです。これにより、要素同士の間隔を調整し、視認性やデザインのバランスを整えることができます。

・要素の外側の余白を設定（内側の余白はpadding）
・背景色や枠線には影響しない（透明なスペース）
・上下左右の余白を個別に指定可能
・autoを使うと中央配置が可能

marginは、以下のようにCSSで指定します。

margin: 20px;

→ 上下左右すべてに20pxの余白を設定。

margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

→ 各方向の余白を個別に設定。

margin: 10px 20px 30px 40px;

→ 上 10px / 右 20px / 下 30px / 左 40px の順で指定。

margin: 0 auto;

→ 左右の余白を自動調整し、要素を中央に配置。

隣接する要素のmarginが重なると、大きい方の値が適用されます。例えば

.box1 {
margin-bottom: 20px;
}
.box2 {
margin-top: 10px;
}

→ 実際の間隔は20px（大きい方が適用）。

marginには負の値を設定することも可能です。

margin-top: -10px;

→ 要素を上方向に10px移動。

画面サイズに応じてmarginを調整することで、柔軟なレイアウトを実現できます。

@media (max-width: 600px) {
.container {
margin: 10px;
}
}

→ 画面幅600px以下のとき、marginを10pxに変更。

margin は、要素の外側の余白を調整する重要なCSSプロパティです。適切に活用することで、視認性の向上、デザインの統一感、レイアウトの柔軟性を実現できます。ぜひ、実際のWebデザインに取り入れてみてください！
阿久梨絵でした！