Web技術基礎
.card {
box-sizing: content-box;
width: 200px;
padding: 10px;
border: 2px solid #333;
margin: 20px;
}套用上方CSS的元素，從左邊框外緣到右邊框外緣的寬度為下列何者？
- A200px
- B224px
- C264px
查看答案與解析
正確答案：B. 224px
在CSS的盒子模型中，元素由內而外依序重疊著內容、內距（padding）、邊框、外距（margin）。在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 都加上的值。外距是邊框外側的空白。