box-sizing

width は content の幅しか指していない

前の回で入力欄の width を 100% にしたとき、右側が少しはみ出したはずです。原因は width の数え方にあります。

CSS の初期設定では、width が指すのは content の幅だけです。padding と border はその外側に足されます。入力欄には左右 12px の padding と 1px の border があるので、実際に場所をとる幅は次のようになります。

親より 26px 広い箱になり、その分だけはみ出していたわけです。padding を足すたびに幅が変わってしまうので、計算がとても面倒になります。

border-box で数え方を変える

box-sizing を border-box にすると、width は border までを含んだ外側の幅を指すようになります。padding と border は内側に食い込むので、100% が本当に 100% になります。

• はすべての要素に当てるセレクタです。この 3 行をファイルの先頭に置くのが今どきの定番で、以降はサイズの計算で悩まなくなります。ページの上下にすきまが出ていた箇所も、これでぴたりとそろいます。

1. style.css の一番上に * のセレクタを追加する
2. その中で box-sizing を border-box にして、すべての要素に適用する
3. 入力欄のはみ出しが直っていることをプレビューで確かめる