box-sizing: border-box を使う

子要素が親要素の範囲内でいっぱいに広がるようにする

いきなり具体例を出すと、<div>要素の中に<textarea>要素などを入れて<textarea>要素を<div>要素の範囲内でいっぱいに広がるようにしたい場合、単にwidth: 100%;を指定してもうまく表示されない。<textarea>が<div>の外へ若干はみ出てしまう。

このような場合は子要素、上のケースだと<textarea>に以下のようなCSSを適用するとうまく表示される。

textarea.stretch {
	box-sizing: border-box;
	width: 100%;
}

上記のbox-sizing: border-box;は、MDNの解説によると以下の通り。

border-box は、要素に指定した width および height の中で境界線およびパディングを取るようにブラウザーに指示します。要素の width を100ピクセルに設定した場合、100ピクセルの中に追加した境界線やパディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小します。これで普通は、要素に対するサイズ設定をもっと簡単になります。

widthにborder及びpaddingが含まれるようになり、人間からするとより直感的にwidthが指定できるようになる。