CSS基礎 練習問題 24：CSSのボックスサイズ計算方式（box-sizing）
要素の幅や高さを指定する際に、paddingやborderの太さを含めた合計サイズが指定した値になるようにしたい場合、正しいCSSの書き方はどれか。
- box-sizing: border-box;
- box-sizing: content-box;
- box-sizing: padding-box;
- overflow: border-box;
- display: border-box;
正解と解説を見る
正解：box-sizing: border-box;
widthやheightにpaddingとborderを含めた合計サイズとして計算させたい場合は、box-sizingプロパティにborder-boxという値を指定します。
【正解の理由】
box-sizing: border-box;を指定すると、指定したwidth・heightの中にpaddingとborderの太さが含まれるようになり、要素の見た目上の合計サイズが指定値からはみ出さなくなります。
【不正解の理由】
• 「box-sizing: content-box;」：これはCSSの初期値（デフォルト）であり、widthやheightにはコンテンツ部分のみが反映され、paddingやborderは別途加算されるため、合計サイズが指定値より大きくなってしまう
• 「box-sizing: padding-box;」：かつて検討された値ではあるが標準として採用されておらず、現在のCSS仕様には存在しない
• 「overflow: border-box;」：overflowはコンテンツが要素からはみ出た際の表示方法（scroll、hiddenなど）を指定するプロパティであり、border-boxという値は無効
• 「display: border-box;」：displayは要素の表示形式（block、flexなど）を指定するプロパティであり、border-boxという値は存在しない