📐 余白がおかしい

😰 こんな症状

余白を指定したのに、思った通りの間隔にならない。

🔍 原因

margin（外側の余白）と padding（内側の余白）を混同している。

❌ エラーが起きるコード

.box {
  margin: 20px; /* 外側の余白 */
  padding: 20px; /* 内側の余白 */
}
<!-- どちらを使うべきか混乱 -->

✅ 直し方

padding は要素の内側、margin は要素の外側に余白を作る。開発者ツールのボックスモデル図で現在の余白を視覚的に確認できる。

✅ 修正後のコード

.box {
  padding: 20px; /* 内側に余白が欲しい場合 */
}
.box + .box {
  margin-top: 20px; /* 要素間の間隔 */
}

🔗 関連するエラー

• スタイルが特定の要素に当たらない — セレクタ名のタイポ
• Flexbox でレイアウトが崩れる — display: flex を子要素に書いている
• 幅を指定したのにはみ出す — box-sizing が content-box のまま
• スマホで表示が小さい — viewport meta タグがない
• z-index が効かない — position が設定されていない

📖 この問題を学べるレッスン

CSSコースで基礎から学ぶ →

📝 関連ブログ記事

• プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説

📖 関連する用語

• セレクタ
• プロパティ
• 値
• クラス
• ID

❓ 関連するQ&A

• CSSを書いたのに画面が真っ白
• Flexboxで横並びにならない
• marginとpaddingの違い