margin
初級読み方：マージン｜英語：Margin
要素の外側の余白で、隣の要素との距離を調整するよ。いつ使う？ カードとカードの間隔を空けたい、セクション間に余白を作りたいなど、要素同士の距離を調整するときに使うよ。間違いやすいポイント: 上下のmarginは「相殺（そうさい）」されるよ。上の要素にmargin-bottom: 20px、下の要素にmargin-top: 30pxを指定すると、間隔は50pxではなく30px（大きい方）になるよ。
やさしい説明
margin（マージン）とは、要素の外側の余白です。隣の要素との距離を指定します。
教室の机に例えると、marginは「机と机の間のスペース」です。机の中身（padding）ではなく、机の外側の空間です。
上下左右を個別に指定できます。また margin: 0 auto; で要素を左右中央に配置できる便利な使い方もあります。
具体例・使い方
/* 上下左右すべて16px */
margin: 16px;
/* 上下10px、左右20px */
margin: 10px 20px;
/* 上8px、右16px、下24px、左16px */
margin: 8px 16px 24px 16px;
/* 左右中央揃え（幅指定が必要） */
.container { width: 800px; margin: 0 auto; }いつ使う？
要素同士の間隔を空けたいときに使います。段落の下に余白を空ける、カード同士の間隔を作る、ページ全体を中央揃えにする——すべてmarginの仕事です。
間違いやすいポイント
❌ 上下のmarginが重なる（マージンの相殺）
/* 上の要素: margin-bottom: 20px */
/* 下の要素: margin-top: 30px */
/* → 間隔は50pxではなく30px（大きい方が勝つ） */
/* 回避策: 片方だけにmarginを指定する */上下のmarginは「相殺」されて大きい方だけが適用されます。これはCSSの仕様です。
よくある疑問
Q: marginとpaddingの違いは？
A: marginは要素の「外側」、paddingは要素の「内側」の余白です。背景色はpaddingまで塗られますが、marginには塗られません。
Q: margin: auto で中央寄せするには？
A: ブロック要素にwidthを指定した上で margin: 0 auto; と書きます。widthがないと効かないので注意。Flexboxならjustify-content: center;の方が簡単です。
Q: marginに負の値を使える？
A: はい。margin: -10px; のように負の値を使うと要素が重なります。レイアウトの微調整に使いますが、多用すると管理が大変になります。
関連用語
📖 関連レッスン
レッスンを見る →