概要

margin は、HTML要素の外側の余白を指定するためのCSSプロパティです。周囲の他の要素との距離（スペース）を制御するために使用されます。

基本的な使い方

See the Pen marginについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

/* 単一方向の指定 */
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;

/* 4方向をまとめて指定 */
margin: 20px 10px 20px 10px;

/* 上下左右すべて同じ余白を指定 */
margin: 15px;

/* 上下と左右を分けて指定 */
margin: 10px 20px;

/* 上・左右・下の順 */
margin: 10px 15px 5px;

/* 中央寄せ（ブロック要素に有効） */
margin: 0 auto;

margin は方向ごとに個別指定もでき、ショートハンドで一括指定も可能です。ブロック要素の中央寄せには margin: 0 auto; がよく使われます。

出力される内容の例

<div style="margin: 20px 10px;">
  この要素は上下に20px、左右に10pxの余白を持ちます。
</div>

役割とメリット（定義リスト形式）

スペースの調整

要素間の距離を制御し、見た目を整理します。

要素の中央揃え

margin: auto; を使うことでブロック要素を中央に配置できます（横幅の指定が必要）。

可読性の向上

見出しや段落間に余白を設けることで、読みやすいレイアウトを作れます。

柔軟なレイアウト構築

レスポンシブデザインやコンポーネント設計にも適した調整ができます。

注意点

• 上下の margin は相殺（マージン折りたたみ）されることがあり、思ったような余白にならないことがあります。
• margin: auto; はインライン要素には効かず、display: block; かつ width の指定が必要です。
• 親要素の幅に依存するため、レスポンシブ設計時は注意が必要です。
• 上下左右の指定順（上→右→下→左）に注意しましょう。

まとめ

margin は要素と周囲の空間を調整するための基本プロパティです。 テキストの読みやすさやデザインのバランスに大きく関わるため、適切に使いこなすことが重要です。中央揃えや要素間のスペーシングなど、Web制作のあらゆる場面で活躍します。