CSS
📏 幅を指定したのにはみ出す
box-sizing が content-box のまま
😰 こんな症状
width: 300px と書いたのに、padding や border を足すと 300px より大きくなる。
🔍 原因
デフォルトの box-sizing: content-box では、width に padding と border が含まれない。
❌ エラーが起きるコード
.box { width:100px; padding:20px; }
/* 実際は140pxになる */✅ 直し方
* { box-sizing: border-box; } を CSS の先頭に書く。border-box なら width に padding と border が含まれる。
✅ 修正後のコード
.box { width:100px; padding:20px; box-sizing:border-box; }
/* 100pxに収まる */この解決法は役立ちましたか？
🔗 関連するエラー
- スタイルが特定の要素に当たらない — セレクタ名のタイポ
- 余白がおかしい — margin と padding の混同
- Flexbox でレイアウトが崩れる — display: flex を子要素に書いている
- スマホで表示が小さい — viewport meta タグがない
- z-index が効かない — position が設定されていない
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説