読者です 読者をやめる 読者になる 読者になる

box-sizing 便利だ。ところでまだスマイルプリキュアみてません。

box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します。

値にcontent-boxを指定すると、
widthとheightで指定する幅と高さが内容領域に対して適用されます。
幅と高さにはパディングとボーダーは含まれません。
これはCSS2.1の仕様通りの解釈で、DOCTYPEスイッチの標準モードのような表示になります。

値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されます。
内容領域にパディングとボーダーを含んだ範囲に対して幅と高さが適用されるため、
パディングとボーダーの分だけボックスサイズが小さくなります。
DOCTYPEスイッチの互換モードのような表示になります。

box-sizing-CSS3リファレンス