margin: auto で中央寄せが効かないとき

📝 問題の再掲

復習Q10: .card { margin: 0 auto; }（widthなし）が中央寄せにならない理由は？

→ width を指定しないと要素が横幅いっぱいに広がるため、「中央」の概念がなくなります。

⚠️ よくある間違い

• width を指定し忘れる（最も多い）
• インライン要素（span, a）に margin: auto を使う
• Flexbox の子要素に使って効かないと悩む

📖 段階的な説明

ステップ1：margin: 0 auto が効く条件

以下の2つの条件を両方満たす必要があります:

• ✅ ブロック要素であること（div, p, section など）
• ✅ width が指定されていること

/* ✅ 正しい例 */
.card {
  width: 300px;      /* ← これが必須！ */
  margin: 0 auto;   /* 左右の余白が均等 → 中央 */
}

/* ❌ 効かない例 */
.card {
  margin: 0 auto;   /* width がないので横幅100% → 中央の意味なし */
}

ステップ2：効かないパターン3つ

• ① width なし — 要素が横幅いっぱいに広がるので中央も何もない
• ② インライン要素 — span や a は margin の左右が効かない
• ③ Flexbox の子要素 — 親が flex なら justify-content: center を使う

ステップ3：中央寄せの3つの方法

💡 比較表

✅ 確認問題

Q: 以下のCSSで .box が中央に来ない原因は？

span.box {
  margin: 0 auto;
  width: 200px;
}