新着！私の44ページの電子書籍「44分で学ぶCSS」が発売されました！ 😃
#box-sizing
要素の幅と高さをどのように計算するかを定義します。 *padding* と *borders* を含めるかどうかを指定します。
デフォルト box-sizing: content-box;
要素の幅と高さは、要素のコンテンツのみに適用されます。
たとえば、この要素は
border-width: 12pxpadding: 30pxwidth: 200px
全体の幅は24px + 60px + 200px = 284pxです。
コンテンツは定義された幅を持ちます。ボックスはこれらの寸法に合わせて調整されます。
box-sizing: border-box;
要素の幅と高さは、要素のすべての部分（コンテンツ、padding、borders）に適用されます。
たとえば、この要素は
border-width: 12pxpadding: 30pxwidth: 200px
全体の幅は、どのような場合でも200pxです。
ボックスは定義された幅を持ちます。コンテンツはこれらの寸法に合わせて調整され、最終的には200px - 60px - 24px = 116pxになります。