CSSのボックスモデルとbox-sizing｜widthがはみ出す原因を図解

width: 100%の要素がはみ出す主因は、既定のcontent-boxではpaddingとborderがwidthの外側へ加算されることです。サイト全体でbox-sizing: border-boxを継承させると、指定幅の内側にpaddingとborderを含められます。

情報確認日：2026年7月27日

結論：まず押さえるポイント

CSSのボックスモデルとbox-sizingの基本

contentは内容領域、paddingは内容と境界線の内側余白、borderは境界線、marginは要素の外側余白です。widthとheightがどこまでを表すかはbox-sizingで変わります。

横幅300px、左右padding20px、左右border1pxをcontent-boxへ指定すると、外寸は342pxです。border-boxなら外寸300pxの中にpaddingとborderが含まれます。

最小の実装例

HTML

<div class="panel">
  <p>幅の内側に余白と境界線を含めます。</p>
</div>

CSS

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.panel {
  width: 100%;
  padding: 1.5rem;
  border: 1px solid #d1d5db;
}

疑似要素にも同じbox-sizingを適用します。外部ウィジェットへ影響する場合は、サイトのルートクラス内へ範囲を限定します。

実務で使うときの考え方

カードを3列にする

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .card { padding: 1rem; border: 1px solid #ddd; }

GridやFlexboxでも、子要素の長い単語、画像の固有幅、min-width: autoがはみ出し原因になる場合があります。単純にoverflow:hiddenで隠す前に原因を特定します。

marginの相殺

通常フローの縦方向marginは相殺されることがあります。親のpaddingやborder、displayの変更で結果が変わるため、余白ルールを一方向に統一すると管理しやすくなります。

DevToolsでボックスサイズを確認する

1. 対象要素をInspectする
2. ComputedのBox Modelを見る
3. content、padding、border、marginの実測値を確認する
4. widthを上書きしているルールとbox-sizingを確認する
5. 親要素から順に横幅制約をたどる

よくある失敗と直し方

overflow-x:hiddenで隠す

原因を残したままフォーカス輪郭やコンテンツまで切れることがあります。はみ出した要素を特定します。

marginをwidthに含めて考える

border-boxでもmarginは外側です。100%幅に左右marginを足せばはみ出すことがあります。

画像だけが大きい

imgにmax-width:100%とheight:autoを指定し、width・height属性や親のmin-widthも確認します。

WordPressで使う場合

WordPressではブロックやプラグインが独自のbox-sizingを持つ場合があります。テーマ全体のリセットを変更するときは、フォーム、テーブル、埋め込み、管理バー、外部ウィジェットを確認してください。

よくある質問

まとめ

ボックスモデルはcontent、padding、border、marginの順に構成されます。border-boxで幅計算を単純化しつつ、はみ出したときはmargin、画像、min-width、長い文字列までDevToolsで確認してください。

関連する基礎記事

• CSSの書き方と読み込み方法
• CSS positionの使い方
• CSS calc()の使い方

参照した公式資料

• MDN Web Docs：ボックスモデルの解説
• MDN Web Docs：box-sizingリファレンス