CSSにおける要素の拡張キャンセル
通常、前のレッスンで説明した拡張は有害であり、
それを排除したいと考えるでしょう。
このため、CSSには box-sizing プロパティがあります。
値を border-box に設定すると、
padding も境界線もブロックを拡張しなくなります：
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
width: 100px;
height: 100px;
background: #f1f1f1;
padding: 25px; /* パディングを設定 */
border: 10px solid green; /* 境界線を設定 */
box-sizing: border-box; /* 拡張をキャンセル */
}
:
説明されたプロパティ box-sizing を
自分で試してみてください。
