はじめに

「divで囲んだ枠にpaddingを設定したら、コンテンツの横幅からdivが少しはみ出た」という経験はないでしょうか？

これがよく起こるケースは、divで枠を入れ子にしている場合や、PC用表示のdivは要素のwidthをピクセル指定にして、レスポンシブ用のレイアウトではwidth:100%で指定している場合です。

私はコーディングの経験が浅い頃に同じ経験をして悩みましたが、CSSに1行追加するだけでこれを解消できる方法を学習しましたので、STEPを踏みながら紹介します。

現象の再現

グレー背景の枠が外の枠からはみ出ます（グレーの枠のwidthは100%で設定しています）。

目次

まずはdivでレイアウトを作成する

今回は全て下記のHTMLを使用しています（「現象の再現」に使用しているHTMLも同じです）。

HTML

<div class="test">
　<p>「天は人の上に人を造らず人の下に人を造らず」と言えり。<br>
　されば天より人を生ずるには、（以下略）</p>
</div>

CSS

.test {
　width:100%;
　padding:10px;
　border:1px solid #ccc;
　background: #f2f2f2;
}

上記のHTMLとCSSを使用すると「現象の再現」のようにグレーの枠がはみ出て表示されます。

この理由は、CSSでwidthを100％で設定した上に、paddingを10pxで設定しているためです。

左右合計20pxの余白が追加されているため、20px分横幅が広くなってしまい、その結果右にはみ出してしまっています。

これを解消するにはbox-sizing:border-boxを追記します。

box-sizing:border-box;を追記する

box-sizingは、ボックス内のサイズをどのように算出するかを指定するプロパティになります。

paddingおよびborderをボックスサイズに含めるか含めないかを指定することができます。

box-sizingの初期値ではpaddingおよびborderはボックスサイズに含めない設定となっており、ボックスサイズに含ませるためにはbox-sizing:border-boxをCSSに設定する必要があります。

STEP1で作成したCSSの最終行にbox-sizing:border-box;を追加します。

CSS

.test {
　width:100%;
　padding:10px;
　border:1px solid #ccc;
　background: #f2f2f2;
　box-sizing:border-box; //ここを追加
}

できあがったもの

右にはみ出ていたグレーの枠が左右均等に収まりました。