box-sizingでボックスサイズの算出方法を指定する【CSS】

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

{box-sizing: 算出方法;}

値の指定方法

box-sizingプロパティでは、以下のような値を指定します。

content-boxを指定すると、ボックスの幅と高さの値に、border（ボーダー）とpadding（パディング）の値が含められません。

padding-boxを指定すると、ボックスの幅と高さの値に、padding（パディング）の値が含められます。

border-boxを指定すると、ボックスの幅と高さの値に、border（ボーダー）とpadding（パディング）の値が含まれます。

要するに、ボックスサイズはコンテンツの領域だけなのか、それともボーダーやパディングも含めるのかということをbox-sizingプロパティで指定することができるということです。

border（ボーダー）とpadding（パディング）の値を含めないcontent-boxが初期値として指定されており、ボーダーやパディングを指定している際に、スマホで見たら要素がはみ出したりしている場合は、このボックスサイズが原因のことが多いです。