デフォルトでは、Web ページ内の要素の実際の幅または高さは、要素のコンテンツ領域の幅または高さ、パディング、および border プロパティのサイズに依存するため、要素のパディングの内容も考慮する必要があります。要素をレイアウトするときの境界線のプロパティ 占有されているページ スペースについては、「 CSS ボックス モデル」で既に説明しました。
図: ボックス サイジング プロパティのデモ
ページ要素の幅と高さを設定すると、要素の実際のサイズが設定したサイズよりも大きくなることが多いのは、上記の理由によるものです。このため、CSS3 には box-sizing プロパティが追加され、デフォルトのボックス モデルが変更されます. box-sizing プロパティを介して、要素のコンテンツ領域に要素の内側と外側の余白を描画できるため、表示される要素の幅と高さは、同じ幅と高さのセットと同じです。
box-sizing プロパティのオプションの値は次のとおりです。
| 価値 | 説明 |
|---|---|
| content-box | デフォルト値である要素の実際の幅または高さは、要素のコンテンツ領域、パディング、およびボーダーの幅または高さの合計に等しい |
| border-box | 要素の実際の幅や高さに影響を与えることなく、要素のコンテンツ領域内にパディングまたはボーダーを描画します |
| inherit | 親要素から box-sizing プロパティの値を継承します。 |
[例] 以下は、box-sizing プロパティの使用を示す例です。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 50px;
margin-top: 5px;
border: 10px solid red;
padding: 5px;
}
.class-two {
box-sizing: content-box;
}
.class-three {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="class-one">デフォルトの状態</div>
<div class="class-two">box-sizing: content-box;</div>
<div class="class-three">box-sizing: border-box;</div>
</body>
</html> 実行結果は次の図のとおりです。
ヒント: 要素の box-sizing: border-box; 属性を定義する場合、要素のコンテンツ領域の実際の幅と高さは、幅と高さの属性から、境界線と両側のパディングの幅を差し引いたものになります。
「 CSS box-sizing: ボックスモデルの変更」についてわかりやすく解説！絶対に観るべきベスト2動画
CSS Box-sizing
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
