Box Sizing

CSSでは、box-sizingは要素の合計の幅と高さをどのように計算するかを決定するプロパティです。デフォルトでは、widthプロパティとheightプロパティにはコンテンツのサイズのみが含まれ、padding、border、marginは考慮されません。ただし、box-sizingプロパティを使用すると、この動作を変更し、widthプロパティとheightプロパティにpaddingとborderのサイズも含めることができます。

これによりレイアウトの計算が簡単になり、予期しない sizing の問題を防げます。

box-sizingプロパティを使用する基本的な構文は次のとおりです。

selector {
    box-sizing: value;
}

value: 目的の box-sizing の動作。次のいずれかを指定できます：

• content-box：これはデフォルト値です。width プロパティと height プロパティには、content のサイズのみが含まれます。padding、border、margin は、指定された width と height の外側に追加されます。

• border-box: width と height プロパティには、content、padding、border のサイズが含まれます

例：

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Default behavior */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

この例では、<div>要素のbox-sizingの値はcontent-boxです。これは、<div>の実際に表示される幅が、300px（コンテンツ）+ 40px（左右のパディング）+ 10px（左右のborder）= 350pxになることを意味します。高さも同様に計算されます。

一方、class container を持つ要素の box-sizing の値は border-box です。この場合、指定された width の 400px には content、padding、border が含まれます。実際の content 領域は padding と border に合わせて縮小されるため、content の width は 400px - 60px（左右の padding） - 20px（左右の border） = 320px になります。height も同様に計算されます。