CSS基礎【box-sizing】

WEB制作の再勉強のアウトプットです。

そもそもの「ボックス」

HTMLタグの「div」「span」などは四角い領域（ボックス）として存在している。
そのボックスは4つの要素で構成されている。

• コンテンツエリア

• padding

• border

• margin

cssのbox-sizingとは？？

要素の幅や高さをCSSで指定した際、
・コンテンツエリアのみに指定する
のか
・ボックス全体に指定する
のかを選択できるのが【box-sizing】。

box-sizing指定無しだと、content-boxとなりコンテンツのみに指定したwidthとheightが設定

box-sizing【border-box】だと、全ての要素でwidthとheightを設定

これがわかるだけで少し成長できたと思いやす。