余白を幅の中に入れる

01 / 05

100% にしたのにはみ出す

幅を 100% にしたのに、余白をつけたら箱が外へはみ出した——これは書きまちがいじゃない。

CSS の width が何を指しているかを知ると、理由がすっきり分かるよ。

.card {  width: 100%;  padding: 16px;}

02 / 05

ふだんの width は中身の部分だけの幅。余白（padding）と枠線（border）はその外側に足される。

つまり見た目の大きさはこうなる。

外の箱より必ず大きくなるわけだね。

03 / 05

box-sizing: border-box; と書くと、width の意味が「余白と枠線まで含めた大きさ」に変わる。

余白は外へ足されず、中身の側が縮んで場所を作る。だから 100% でぴったり収まるようになるよ。

.card {  width: 100%;  padding: 16px;  box-sizing: border-box;}

04 / 05

この計算のしかたは箱ごとに変えるものではない。ページの中で数え方が混ざると、崩れの原因を探しにくくなる。

セレクタをカンマで並べれば、まとめて同じ指定ができる。CSS のはじめに書いておくのがおすすめだよ。

.inner, .card, .panel {  box-sizing: border-box;}

05 / 05

幅を割合にする、せまいときは積み替える、そして数え方をそろえる。この3つで崩れの大半は消える。

ここから書いてみよう。