Web技術の基礎
.card {
box-sizing: content-box;
width: 200px;
padding: 10px;
border: 2px solid #333;
margin: 20px;
}上のCSSを指定した要素の、左右のボーダーの外側の端から端までの幅はどれか。
- A200px
- B224px
- C264px
答えと解説を見る
正解：B. 224px
CSSのボックスモデルでは、要素は内側から、内容、パディング、ボーダー、マージンの順に重なっています。box-sizing: content-box(既定の値)では、width は内容の幅だけを表すので、ボーダーの外側までの幅は 200 + 10 × 2 + 2 × 2 = 224px です。マージンはボーダーの外側の余白で、ほかの要素との間隔になります。box-sizing: border-box にすると、width がボーダーまでを含む幅になり、内容の幅は 200 − 24 = 176px になります。
- A. 内容の幅だけです。content-box では、パディングとボーダーが width の外側に加わります。
- B. 正しい。200 + 20 + 4 = 224px です。
- C. 左右のマージン 20 × 2 = 40px まで足した値です。マージンはボーダーの外側の余白です。