ボックスモデルとは大まかに分けて、２種類あり、インラインボックスとブロックボックスがある。CSSで設定出来るのは、コンテンツ領域の幅と高さであり、その外側の設定として、padding(パディング)、birder(ボーダー)とmargin(マージン)領域があります。

それでは、それぞれの特徴を見ていきましょう！！

インラインボックスとは、テキストなどの行の隙間に入れ込むことの出来るボックスで、テキストや別のインラインボックスと並列させることが出来ます。例えば、<span>、<br>、<input>や<img>などが挙げられます。

そして、これらのインラインボックスは、一部の例外を除いて、コンテンツ領域の幅と高さ、上下のマージンを設定することが出来ません。一部の例外として、上に挙げた<input>や<img>は、設定することができます。

注意事項として、インラインボックスは、高さ設定が出来ないため、<span>このように囲う</span>
などでをして、上下の行の文字とかぶった場合、補正が入ることがないので、注意しましょう！！

こう言った場合の対処法として、行間を取る為に、CSSでline-heightで設定してあげましょう！

ブロックボックスとは、CSSで幅の指定をしない限り、親要素のコンテンツ領域いっぱいに広がり、全ての領域のサイズをCSSで設定出来出来ます。例えれば、<div>、<section>、<header>、<footer>や<p>などがあげられます。

*ブロックボックスに幅の指定をしたとしても、空いたスペースに他のボックスが 配置されることはないので、もし、横に配置したい場合は、CSSでfloatもしくは、flexで横並びになるように指定してあげなければなりません。こちらについては、また別の記事でアップさせていただきます。

最近ではスマホの普及により、スマホでの検索が当たり前になっている為、webサイトもレスポンシブwebデザインが主流になっているので、従来のボックスのサイズ指定では、対応しずらかったことがあります。

そう言った時のための便利なプロパティで、box-sizing: border-boxがあります。

通常の場合CSSでwidth:100%にしたとして、padding(パディング)とborder(ボーダー)を設定すると、width:100％にプラスでpaddingとborderの幅、高さが付け加えられますが、これを指定することで、width:100％の中にpaddingとborderの幅、高さが含まれるようになります。

例えば、記事の幅を800pxと指定したとして、そこにpadding:5pxとborder:1pxのラインを書いたとします。普通でしたら、800+10px（左右のpadding）+2px（左右のborder）で812pxの幅が必要になります。しかし、box-sizingを使う事で、paddingやborderの幅も含めた幅（800px）で概算されます。なので、めんどくさい計算などしなくても書いていくことができる様になります！！