ボックスの生成
HTMLの要素はどの要素もボックスと呼ばれる四角形の領域を生成する。ボックスは大きく分けてブロックボックスとインラインボックスの２種類に分けられる。これは、displayプロパティの値によってボックスの種類が決まる。
各HTML要素はブラウザのデフォルトスタイルシートによってdisplayプロパティのデフォルト値が指定されているので、それに伴ってデフォルトのボックスの種類も決まっているが、displayプロパティを変更する事でボックスの種類を帰る事ができる。
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
ブロックボックスとは
displayプロパティの値がblockやtableなどの要素はブロックボックスを生成する。ブラウザのデフォルトでブロックボックスを生成する要素にはh1~h6,p,div,ul,ol,li,table要素などがある。
ブロックボックスは幅に関係なく、上から下へ縦方向に配置される。ブロックボックスの前後には改行が伴って、1つの段落としてレイアウトされると考えるとイメージがつきにくいかもしれない。
他にブロックボックスにはこのような特徴がある。
・幅（width)や高さ（height）を指定
できる。幅を指定しなければ親要素の幅全体に広がる。
・上下左右のmargin、paddingを指定できる。
インラインボックスとは
displayプロパティの値がinlineや
inline-tableなどの要素はインラインボックスを生成する。ブラウザのデフォルトでインラインボックスを生成する要素にはspan,em,strong,img要素などがある。
インラインボックスは左から右へ横方向に配置される。インラインボックスの前後には改行は伴わず、行内の一部としてレイアウトされると考えるとイメージがつきやすいかもしれない。
他にもインラインボックスにはこのような特徴がある。
・幅（width）や高さ（height）を指定できない
・上下のmarginを指定できない。
※インラインレベル要素でもimgや、input、textarea要素のようにCSSで幅や高さを指定できる要素もある。このような要素は置換要素と呼ばれ、幅や高さを指定できるHTMLの属性（width, height, size, colなど）を持っている特徴がある。
インラインブロックボックス
displayプロパティの値がinline-block要素はインラインブロックボックスを生成する。インラインブロックボックスはインラインボックスと同じように横方向に配置されるが、ブロックボックスのように幅や高さ、上下のmarginを指定できるので横並びのナビゲーションなどのレイアウトに便利。
displayプロパティ
主要なdisplayプロパティの値と生成されるボックスは以下のようになる。
ボックスモデルとは
cssでレイアウトをする際には、ボックスモデルを理解する必要がある。cssの定義するボックスモデルは以下の図のように4つの領域で構成されている。
参考元：https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/
画像の引用先：https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/