margin
初級読み方：マージン｜英語：Margin
要素の外側の余白で、隣の要素との距離を調整するよ。
やさしい説明
margin（マージン）とは、要素の外側の余白です。隣の要素との距離を指定します。
教室の机に例えると、marginは「机と机の間のスペース」です。机の中身（padding）ではなく、机の外側の空間です。
上下左右を個別に指定できます。また margin: 0 auto; で要素を左右中央に配置できる便利な使い方もあります。
具体例・使い方
/* 上下左右すべて16px */
margin: 16px;
/* 上下10px、左右20px */
margin: 10px 20px;
/* 上8px、右16px、下24px、左16px（時計回り） */
margin: 8px 16px 24px 16px;
/* 個別に指定 */
margin-top: 32px;
margin-bottom: 32px;
/* 左右中央揃え（widthの指定が必要） */
.container {
width: 800px;
margin: 0 auto;
}marginとpaddingの違い
- margin — 外側の余白。要素と要素の間の距離。背景色は適用されない
- padding — 内側の余白。内容と枠線の間の距離。背景色が適用される
.card {
margin: 16px; /* カードの外側のスペース（他要素との距離） */
padding: 24px; /* カード内側のゆとり（テキストと枠の間） */
background: white; /* paddingの領域まで白になる、marginは透明のまま */
}「ボタンをクリックしやすくしたい（タップ領域を広げたい）」場合は padding を増やします。marginを増やしても要素自体のサイズは変わらないからです。
margin: 0 auto で中央揃え
/* よく使うパターン: ページのコンテンツを中央に */
.container {
max-width: 1200px;
margin: 0 auto; /* 上下0、左右auto（均等に余白が入り中央揃え） */
padding: 0 16px; /* スマホでの左右の余白 */
}いつ使う？
- 段落の下に余白を空けて読みやすくしたいとき
- カード・ボタンなど要素同士の間隔を作るとき
- ページ全体のコンテンツを左右中央揃えにしたいとき（
margin: 0 auto） - 見出しと本文の間にスペースを作りたいとき
間違いやすいポイント
❌ 上下のmarginが重なる（マージンの相殺）
上下方向のmarginは「相殺」されて大きい方だけが適用されます。margin-bottom: 20px と margin-top: 30px が隣り合うと間隔は50pxではなく30pxになります。
/* margin-bottom: 20px の要素 */
/* margin-top: 30px の要素 */
/* → 実際の間隔は 30px（大きい方が勝つ） */
/* 回避策: Flexboxコンテナ内はmargin相殺が起きない */
.flex-container { display: flex; flex-direction: column; gap: 16px; }❌ margin: auto が効かない
margin: 0 auto で中央揃えするには、要素に width または max-width の指定が必要です。幅がないとautoが機能しません。
よくある疑問
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; のように負の値を使うと要素が重なります。レイアウトの微調整に使いますが、多用すると管理が大変になります。
関連用語
📖 関連レッスン
レッスンを見る →