box-sizing: content-box;を使うことがあったのでおさらいメモです。
box-sizingとは
以下4つで整形された要素
①content + ②border + ③padding + ④margin
box-sizing: border-box;とbox-sizing: content-box;の違いはwidth内にどこまでいれるかである。
完全に正しい表現ではないかもしれないがあくまでイメージです。(詳細は下記)
box-sizing: content-box;
width = ①contentとなる。
つまり仮に②border + ③paddingがあった場合、widthの幅から ②border + ③padding の幅が上乗された見た目になる
例
- 定義したwidth =
250px - 見目サイズ =
330px( 250px (①width)+20px (②border)+60px (③padding) ) - widthと見た目サイズが
ずれる
See the Pen MWjYZRL by non Man (@nonMan21) on CodePen.
特に何もしないとcontent-box;です。
しかし、実際にpaddingやborderをいれるたびに頭の中で思っていたwidthからずれるのはコーディングしていても意図しないズレが起きるし、せっかく調整したあとに修正する場合に非常に効率が悪いことが多いです。
box-sizing: border-box;
width = ①content + ②border + ③paddingとなる。
つまり仮に②border + ③paddingがあった場合でも、widthの幅で変わらない
例
- 定義したwidth =
250px - 見目サイズ =
250px( 170px (①width)+20px (②border)+60px (③padding) ) - widthと見た目サイズが
同じ
See the Pen yLayGrG by non Man (@nonMan21) on CodePen.
まず全体のレイアウントを考えてwidthを設定、その後borderやpaddingで中身をスタイルすることが多いと思います。
border-box;を設定しとくと要素のwidthは変わらず、中身だけを集中してスタイルできるし、幅の修正をする際も基本的にはwidthだけを考えればOKで効率が良いことの方が多いです。
そのため、通常はbase.cssのhtmlセレクタなどにborder-box;を設定してしまうことが多いです。
content-boxをあえて使うとき
最近あった例ですが、小さい画像コンテンツにborderをつけるときに使いました。
border-boxは中身が画像でもいい感じに縮小してくれます。が、そもそも小さい画像の場合は見えにくくなってしまうため必要に応じてcontent-boxを使ってあげるのも良いかもしれません。
※ 下記例は一部切り取ったのであんまり変わらないかもですが、小さい要素程サイト全体で見た時にサイズ感の変化に違和感が出ることもしばしばでした。
border-boxの場合
「白いborder入れたら画像が小さくなっちゃって少し見えにくい...!?💦」
content-boxの場合
「画像サイズは元のままだし、borderの太さ調整が来ても基本OK!」
