ある要素にwidth: 300px; padding: 20px; border: 10px solid #000; box-sizing: border-box;を指定した。この要素のコンテンツ領域（padding・borderを含まない実際のコンテンツ幅）は何pxになるか。｜Webクリエイター能力認定試験の対策カード

スタンダード：実技問題（HTML5の変換、HTMLの作成、CSSの読込と作成、画像の表示）

ある要素にwidth: 300px; padding: 20px; border: 10px solid #000; box-sizing: border-box;を指定した。この要素のコンテンツ領域（padding・borderを含まない実際のコンテンツ幅）は何pxになるか。

解説

box-sizing: border-boxではwidthに指定した値がborder外側までの幅（すなわち300px）となるため、そこからpaddingの合計40pxとborderの合計20pxを差し引いた240pxがコンテンツ領域の幅になる。

根拠シラバス「CSSの読込と作成」box-sizingプロパティ