CSS のボックスモデルについて

参考資料

CSS では要素の持つ領域についてボックスモデルと呼ばれる考え方が適用されている。

ボックスモデルとは html の要素がそれぞれボックス型の領域を持っていて CSS でその領域の大きさや他の要素（の境界）との距離を操作することができるというモデルである。

CSS でセレクタを指定して操作できるのはそのセレクタの属する領域についてである。

ボックスモデルでは要素の持つ領域がパーツに分けられている。

それぞれのパーツとその外側に名前がついているのでまとめる。

要素は html の開始タグから終了タグまでの部分のこと。

この領域のことをcontent-boxと呼ぶと思われる。

heightやwidthで指定できるのは要素そのものの値となる。

インライン要素のheightやwidthは固定されているため指定することができない。

要素そのものの大きさ（長さ）はその要素が持つ領域を超えることもできる。超えた部分の要素は他の要素の領域にも干渉する。

領域を超えた部分の扱いについてはoverflowプロパティで指定することができる

paddingは要素に属する領域（border-box）のうち要素そのもの（content-box）の外側の部分のこと。

borderは要素に属する領域とその外側の境界線のこと。

margin によって要素に属している領域の外側の部分の余白（他の要素の境界との距離）を指定することができる。

margin 自体はその要素に属していないのでこの余白の指定は他の要素の指定に相殺されることがある。

box-sizingプロパティを指定することによって widthやheightで設定できる範囲を変更することができる。

上記の要素の説明は初期値であるbox-sizing: content-box;に即している。

box-sizing: border-box;とすればpaddingとborderが含まれる領域についてwidthやheightを指定できるようになる。