box-sizingとは

box-sizingは、widthとheightにpaddingやborderのサイズを含めるかどうかを決めれるプロパティです。

指定できる値は以下の通りです。

box-sizingを指定していない初期値では
content-boxが設定されているのでwidthとheightにpaddingやborderのサイズは含まれません。
一方で、box-sizingにborder-boxを指定することにより、widthとheightにpaddingやborderが含まれます。
ここまで読んでいただいた方たちは、なんとなくbox-sizingについて理解できたかもと思われているかもしれませんが
box-sizingをきちんと理解するには、ボックスモデルの概念を学ぶ必要があります。

ボックスモデルとは

box-sizingをきちんと理解するためには、ボックスモデルの概念を知る必要があります。ボックスモデルとは、「HTMLにおけるすべてのコンテンツは四角い箱の中にある」というこです。
下記の図を見て下さい。

ボックスモデルを使って説明

では、ボックスモデルを使ってbox-sizingについて説明していきます

box-sizingがcontent-boxの時は、paddingやborderはwidthとheightには含まれません。
以下に図を載せています。

box-sizingがborder-boxの時は、paddingやborderはwidthとheightに含まれます。 以下に図を載せています。

コンテンツのwidthとheightの中に、paddingやborderが含まれます。

上記のように、同じwidthとheightだとしても
borderとpaddingの分、border-boxの方が小さくみえます。

今回は、box-sizingについてご紹介しました。
是非、サイト制作の際に使用してもらい
box-sizingやボックスモデルについて、理解を深めてもらえたら嬉しいです。
ご清覧くださいありがとうございました。

【実践マーケティング手法２２選】 無料ダウンロード

助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。